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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jQuery操作动画完整实例分析
Jan 10 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
初识Node.js
2015/03/20 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
对python中执行DOS命令的3种方法总结
2018/05/12 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
python类共享变量操作
2020/09/03 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
金宝贝童装官网:Gymboree
2016/08/31 全球购物
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
大学生专科毕业生自我评价
2013/11/17 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
体育教学随笔感言
2014/02/24 职场文书
技校毕业生自荐信
2014/06/03 职场文书
管理标语大全
2014/06/24 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
抢劫罪辩护词
2015/05/21 职场文书
大学毕业典礼致辞
2015/07/29 职场文书