jquery对table做排序操作的实例演示


Posted in jQuery onAugust 10, 2017

最近要对报表数组进行排序,在前端处理如下:

首先在前台页面加载时对每行tr添加自定义的属性data-sort-field-ftime,属性值为要排序的字段的值(我的是数字比较方便):

$.each(jsonarray, function(i, obj) {
     troptions += "<tr data-sort-field-ftime=\""+obj.paiming+"\">";     
     troptions += "<td>"+(Number(obj.cdsPrem)/unitnow).toFixed(dotnow)+"</td>";
     troptions += "<td>"+(Number(obj.cdjPrem)/unitnow).toFixed(dotnow)+"</td>";
     troptions += "<td>"+(Number(obj.sumPrem)/unitnow).toFixed(dotnow)+"</td>";
     troptions += "<td>"+obj.paiming+"</td>";
     troptions += "</tr>";
   });

在要排序的表头添加onchange事件,以下为onchange事件:

//排序处理
 function changepm(){
  var sortType=$("#pm").val();
  var $trList = $("#ta tbody > tr");//获取现有tr对象
  //冒泡排序  
  for (var i = 0; i < $trList.length - 1; i++) {
   for (var j = 0; j < $trList.length - 1 - i; j++) {
    var value1 = parseInt($trList[j].attributes["data-sort-field-ftime"].nodeValue); 
    var value2 = parseInt($trList[j + 1].attributes["data-sort-field-ftime"].nodeValue);
    if (sortType === "asc" ? value1 > value2 : value1 < value2) {
     var $temp = $trList[j];
     $trList[j] = null;
     $trList[j] = $trList[j + 1];
     $trList[j + 1] = null;
     $trList[j + 1] = $temp;
    }
   }
  }      
  //返回排序后的tr集合
  //将原来的tr清空,再将排序后的tr插入到table的dom中
  console.log($trList);
  $trList.appendTo($("#ta > tbody").empty());
 }

以上就是jquery对table做排序操作的详细内容啦,希望对大家有所帮助,也希望大家继续支持三水点靠木~

jQuery 相关文章推荐
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 #jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 #jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 #jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 #jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 #jQuery
jquery+css实现简单的图片轮播效果
Aug 07 #jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 #jQuery
You might like
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
重定向实现代码
2006/11/20 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
python实现人民币大写转换
2018/06/20 Python
python实现顺时针打印矩阵
2019/03/02 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
毕业生动漫设计求职信
2013/10/11 职场文书
环境工程毕业生自荐信
2013/11/17 职场文书
销售工作岗位职责
2013/12/24 职场文书
中专生职业生涯规划书范文
2013/12/29 职场文书
学生实习介绍信
2014/01/15 职场文书
北京大学自荐信范文
2014/01/28 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
15个值得收藏的JavaScript函数
2021/09/15 Javascript