antd table 排序如何使用_antd table按表格里的日期去排序操作
表格内容
根据票据日期升序(这里是已经排序后的效果)
上代码
代码中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按表格里的日期去排序操作相关推荐
- antd table 时间搜索_antd table按表格里的日期去排序操作
表格内容 根据票据日期升序(这里是已经排序后的效果) 上代码 代码中data的内容如下 根据paper_date排序,因为目前这种格式不支持比较,需要先转换成时间戳 new Date(aTimeStr ...
- antd table 排序如何使用_Antd Table列字符串排序+数字排序
在中后端WEB app开发过程中经常遇到table列排序的问题,Antd table 提供了sorter的接口,我们可以根据各自项目特点拓展即可. 1.Number类型数据排序,官方提供了number ...
- matplotlib的table详细使用、使用matplotlib绘制表格
matplotlib之table详细使用.使用matplotlib绘制表格 参数解释详情 表格一般通常和其他图组合使用 cellText:表格的数值,将源数据按照行进行分组,每组数据放在列表里存储,所 ...
- antd table排序 vue_ant-design-vue中的table取消默认不排序的状态
ant-design-vue中的table组件具有排序的属性,该排序属性有三种状态:升序.降序和不排序.在项目开发中,有时产品经理会要求排序时只能有升序或降序两种状态,而table组件中却没有相应的A ...
- (十八)Flink Table API SQL 编程指南 Table API 和Datastream API 集成
文章目录 DataStream 和 Table 之间的转换 依赖项和导入 配置 执行行为 datastream API table API 批处理运行时模式 Changelog统一 处理(仅插入)流 ...
- html table表头升序 降序,jquery实现表格根据字段进行升序降序
例子: 蚂蚁部落 * { margin: 0; padding: 0; } body { padding: 100px; } .select { position: relative; display ...
- Hive 的概念、应用场景、安装部署及使用、数据存储 、table(内部表)和external table(外部表)、partition(分区表)和bucket(分桶表)
目录 1.Hive 的概念 2.Hive 的特点 3.Hive 和 RDBMS(关系型数据库) 的对比 4.Hive 和 HBase 的差别 5.Hive 架构 6.Hive安装与使用方法介绍 7.H ...
- R语言data.table导入数据实战:data.table中编写函数并使用SD数据对象
R语言data.table导入数据实战:data.table中编写函数并使用SD数据对象 目录 R语言data.table导入数据实战:data.table中编写函数并使用SD数据对象 #data.t ...
- R语言data.table导入数据实战:data.table使用by函数进行数据分组(aggregate)
R语言data.table导入数据实战:data.table使用by函数进行数据分组(aggregate) 目录 R语言data.table导入数据实战:data.table使用by函数进行数据分组( ...
最新文章
- 一个 Mybatis 开发神器:Fast MyBatis 超好用
- 为什么不建议在 MySQL 中使用 UTF-8?
- C语言实现二进制文件读写
- LeetCode 中等难度 92. 反转链表 II解题思路
- 多变量线性回归 原理
- python获取一个月之前日期_Python 获取几天前的时间
- 微软官宣:史上最贵开发工具 75亿美金收购GitHub
- flowable流程实例笔记(1)
- spring cloud微服务分布式云架构-Spring Cloud 分布式的五大重点
- 1016 部分A+B (15 分)—PAT (Basic Level) Practice (中文)
- html中怎么让照片变模糊,CSS改变图片由模糊到清晰
- 学生用计算机怎么恢复出厂设置,电脑怎么恢复出厂设置
- 怎么删除服务器的ibd文件,mysql数据库ibd文件
- java生成随机的26位英文字母
- 子组件调用父组件中方法的方法
- 将千克转换成磅 Exercise05_03
- 多元线性回归分析练习题
- Linux/Centos: 服务器TIME_WAIT和CLOSE_WAIT区别及解决方案
- LabVIEW程序框图保存为图像
- mysql 创建触发器(for each row解释)