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+Ajax实现用户名重名实时检测
Jun 01 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 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
农民和部队如何穿矿
2020/03/04 星际争霸
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
jquery ajax例子返回值详解
2012/09/11 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python获取当前时间的方法
2014/01/14 Python
python字典序问题实例
2014/09/26 Python
Python三元运算实现方法
2015/01/12 Python
Python中的ceil()方法使用教程
2015/05/14 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
ASP.NET Core中的配置详解
2021/02/05 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
法学专业应届生求职信
2013/10/16 职场文书
班主任班级寄语大全
2014/04/04 职场文书
2014年党课学习材料
2014/05/11 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
离婚起诉书范本
2015/05/18 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js