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使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery实现轮播图源码
Oct 23 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
django反向解析和正向解析的方式
2018/06/05 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
python同时遍历两个list用法说明
2020/05/02 Python
美国钻石商店:Zales
2016/11/20 全球购物
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
2015元旦主持词开场白和结束语
2014/12/14 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js