表格内容

根据票据日期升序(这里是已经排序后的效果)

上代码

代码中data的内容如下

根据paper_date排序,因为目前这种格式不支持比较,需要先转换成时间戳

new Date(aTimeString).getTime()

之后再用装换后的时间戳去比较,比较用到的函数是 .sort,一下是用来比较的代码

data.sort(function(a, b) {

let aTimeString = a.paper_date;

let bTimeString = b.paper_date;

let aTime = new Date(aTimeString).getTime();

let bTime = new Date(bTimeString).getTime();

return aTime - bTime;

});

附:知识用来记录自己遇到的问题解决方法,大神勿喷

补充知识:antd的Table后端排序(列升降序)的坑

antd Table列升降序需要有个sorter属性

由于分页是后端分页,因此,排序也必须用后端排序(因为前端获取到的数据只有一页,无法正确排序)

sorter: (a, b) => { // 啥也不写,不需要前端排序,写了sorter才会出现排序图标},

这里会碰到一个坑,接口请求回来的数据明明已经排序正确了,传给dataSource也是正常的,为什么渲染出来的是错的? 因为前端又不完整的自行排序了一次

这时候sorter就不该写成回调函数形式,而应该写成sorter: true

const columns = [{

title: 'Name',

dataIndex: 'name',

filters: [{

text: 'Joe',

value: 'Joe',

}, {

text: 'Jim',

value: 'Jim',

}, {

text: 'Submenu',

value: 'Submenu',

children: [{

text: 'Green',

value: 'Green',

}, {

text: 'Black',

value: 'Black',

}],

}],

// specify the condition of filtering result

// here is that finding the name started with `value`

onFilter: (value, record) => record.name.indexOf(value) === 0,

// sorter: (a, b) => a.name.length - b.name.length,

sorter: true,

}]

那回调不写,我应该在哪里发送后端排序请求呢?

rowKey='projId'

size="small"

style={{ height: tableHeight }}

columns={columns}

tableData={this.state.tableData}

expandedRowRender={this.expandedRowRender}

pagination={pagination}

handleTableChange={this.handleTableChange} // 在这里发送请求 处理后端排序

scroll={{ y: tableScrollHeight, x: 1660 }}

tableRowSelection={this.tableRowSelection}

/>

以上这篇antd table按表格里的日期去排序操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持自学编程网。

antd table 时间搜索_antd table按表格里的日期去排序操作相关推荐

  1. antd table 排序如何使用_antd table按表格里的日期去排序操作

    表格内容 根据票据日期升序(这里是已经排序后的效果) 上代码 代码中data的内容如下 根据paper_date排序,因为目前这种格式不支持比较,需要先转换成时间戳 new Date(aTimeStr ...

  2. impala 本年格式化时间_【DataPM】Impala里的日期函数

    最近Impala里查数据的时候,发现有很多时间函数不支持,因此,搜集整理了一批常用时间函数,以备查询. 让日期自己与自己比较大小 datediff(first_value(create_time) o ...

  3. antd table动态表头_antd table动态控制指定列的显隐

    需求:列表中有A,B,C三列,如果B没有数据的时候,将B隐藏. //先将含有A,C的column写好 column = [ { title: '商品名1', dataIndex: 'A', key: ...

  4. php表格单元格怎么实现排序,javascript实现对表格元素进行排序操作

    我们在上网中都能看到很多能够排序的,如大小.时间.价格等 现在我们也试一下排序功能: 排序的函数代码:里面含有点击之后排序--还原,和排升序和降序. function sortAge(){ //对年龄 ...

  5. 关于layui表格重载后日期选择器失效的问题

    最近发现有人遇到一个关于layui的问题,表格重载后表格里的日期选择器点击没反应了,自己用layui的时候没接触到这些,但是为了以后做打算,我也帮忙看了下,通过各种搜集信息终于找到了解决办法. 首先, ...

  6. 如何在Excel里插入日期和时间

    Excel里如何在表格里插入日期和时间 按"Ctrl+:" 为当前日期:按"Ctrl+Shift+:"为当前时间

  7. C#表格table时间显示年月日时分秒格式设置

    C#表格table时间显示年月日时分秒格式设置 作者:张国军_Suger 开发工具与关键技术:Visual Studio 2015.C#..NET 在做C#项目是遇到的前端表格的时间处理问题,一般都是 ...

  8. Antd Vue 组件库之Table表单

    Antd Vue 组件库之Table表单 Table 表格 展示行列数据. 何时使用 当有大量结构化的数据需要展现时: 当需要对数据进行排序.搜索.分页.自定义操作等复杂行为时. 如何使用 指定表格的 ...

  9. 使用table标签制作常用的html表格

    table 标签用于定义 HTML 表格.简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成. tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元. ...

最新文章

  1. 项目代码结构 Dao,Service,Controller,Util,Model 含义
  2. CF-311B Cats Transport(斜率优化DP)
  3. python3 下的文件输入输出特性以及如何覆盖文件内容和接下去输入
  4. 微信环境中如何实现下载apk文件的下载
  5. 新手编程:程序员 5 种编程入门方法,快速学会一门编程语言!
  6. LINUX负载均衡LVS-NAT搭建
  7. vs2015社区版不支持installshield
  8. 定时器事件QtimerEvent 随机数 qrand Qtimer定时器
  9. Windows 重装系统后 开发环境配置 软件安装列表
  10. python小学生入门教程-python 小学生教程|怎么让一个小学生学会Python?
  11. 摩托车头盔的逆向建模与设计
  12. 【bzoj1059】 ZJOI2007矩阵游戏 二分图匹配
  13. Python3-爬虫~selenium\phantomjs\爬取XX网页电影过程中向下滚动网页问题
  14. jses6 新特性,以及es7/8/9 或,常用特性
  15. 数据库的用户名及密码
  16. Webservice的测试环境 网上现有的几个webservice
  17. Vue UI组件库以及 Element UI 使用
  18. python数字推盘_从零开始学编程做游戏:一个文科生策划的14周
  19. VDA 6.3 难点之“过程划分”
  20. 基于嵌入式Linux的SOHO路由器设计

热门文章

  1. html类选择器使用在什么场景,CSS选择器
  2. python 爬虫 请求网页内容不一致_Python爬虫偷懒神器 — 快速构造请求头!
  3. Two Arrays(DP递推)
  4. numpy练习100道题
  5. Codeforces 1093D Beautiful Graph
  6. 编程语言50年来的变化,我用50种编程语言告诉你“Hello world”怎么写!
  7. 2019年 ICPC亚洲区预赛(上海赛区)总结
  8. Python+Opencv分水岭算法
  9. 玩转GIT系列之【如何放弃本地/服务器端所做的修改】
  10. Linux中的动态链接库与静态链接库