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插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
php写的AES加密解密类分享
2014/06/20 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
axios学习教程全攻略
2017/03/26 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
tensorflow 环境变量设置方式
2020/02/06 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
会计专业毕业自荐书范文
2014/02/08 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
针对吵架老公保证书
2015/05/08 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
军训结束新闻稿
2015/07/17 职场文书
单位提档介绍信
2015/10/22 职场文书
个人业务学习心得体会
2016/01/25 职场文书
如何写好活动总结
2019/06/21 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript