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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jquery实现抽奖功能
Oct 22 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
opencv与numpy的图像基本操作
2019/03/08 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
django实现日志按日期分割
2020/05/21 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
Linux开机引导的步骤是什么
2015/10/19 面试题
《登鹳雀楼》教学反思
2014/04/09 职场文书
家长对学生的评语
2014/04/18 职场文书
开发房地产协议书
2014/09/14 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
2014年财务部工作总结
2014/11/11 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
常用的Python代码调试工具总结
2021/06/23 Python
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python