"; tr" />
当前位置:首页 > 日记 > 正文

jquery对table做排序操作的实例演示

jquery对table做排序操作的实例演示

最近要对报表数组进行排序,在前端处理如下:

首先在前台页面加载时对每行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做排序操作的详细内容啦,希望对大家有所帮助,也希望大家继续支持~

相关文章

bootstrap组件之导航组件使用方法

bootstrap组件之导航组件使用方法

组件,导航,使用方法,电脑软件,bootstrap,在上篇文章给大家介绍了bootstrap组件之按钮式下拉菜单小结,下面通过本文给大家介绍bootstrap导航组件的使用方法,一起看看吧!Bootstrap 中的导航组件都依赖同一个 .nav 类和ul,状态类也是共用的。改变…

详谈lastIndex对正则结果的影响

详谈lastIndex对正则结果的影响

正则,电脑软件,lastIndex,前言今天遇到一个问题,用正则表达式去检查同一个字符串时,交替返回true和false。无奈之下,重新翻了翻权威指南,发现罪魁祸首原来是lastIndex。可在控制台尝试下let reg = /[\d]/g//undefinedreg.test(1)//truereg.tes…

PS实用技巧:图层和文字不为人知的

PS实用技巧:图层和文字不为人知的

图层,文字,不为人知,详解,实用技巧,闲话不多言,本期主要讲的还是PS实用小技巧,你不知道的妙技之&ldquo;图层&rdquo;&ldquo;文字&rdquo;为了表达更加清晰直观,特意录制生成GIF图,以供直观了解。版本提示:我使用的Photoshop版本为2017 CC(其他版本…

WordPress中限制非管理员用户在文

WordPress中限制非管理员用户在文

管理员,评论,用户,文章,电脑软件,之前有网友提出,在WordPress中有没有办法实现每篇文章只允许用户评论一次?暂不说这个需求有没有用,毕竟WordPress就是给有各种需求的人用的。这个功能实现起来也比较简单,只需每次用户发表的评论进数据库之前,从…

Photoshop绘制可爱风格的漫画Q版美

Photoshop绘制可爱风格的漫画Q版美

教程,绘制,头像,风格,漫画,效果图:原图:主要过程:软件是sai,板绘,这些不用多说了,然后先根据照片,打出大概的草稿。第二步就是描出线稿啦,我描线稿用的是自己调的笔刷。线稿笔刷设置ps:右键笔刷点击设置会弹出这个,这里面的抖动修正和笔刷修正建议开5…

PHP判断手机是IOS还是Android

PHP判断手机是IOS还是Android

电脑软件,PHP,IOS,Android,本文介绍了PHP判断手机是IOS还是Android的三个小实例,要判断用户的手机是安卓的还是ios的,搜了一下相关的资料,最终获得的结果分享给大家。实例1:主要是要用到HTTP_USER_AGENT,它表示的意思是用来检查浏览页面的访问者…

PS超强合成一张非常逼真写实的赛车

PS超强合成一张非常逼真写实的赛车

赛车,修理店,逼真,海报,电脑软件,这篇教程教的朋友们使用PS来合成一张非常逼真写实的赛车修理店海报。教程合成难度中等偏上,推荐一下和的朋友们一起分享、一起学习了,我们先来看看最终的效果图吧!12 3 4 5 阅读全文1 23 4 5 阅读全文1 2 34…

wps演示全屏播放如何设置

wps演示全屏播放如何设置

全屏,方法,设置,演示,如何设置,  我们的日常工作生活已经处处充满了wps演示的痕迹,但是大家知道wps怎么设置全屏播放呢?下面小编就为你介绍wps 版ppt如何全屏播放的方法啦,不懂的朋友会请多多学习wps哦。wps演示设置全屏播放的方法打开一个…

FTP服务器关于权限的问题

FTP服务器关于权限的问题

权限,服务器,电脑软件,FTP,很多电影网站,论坛或其它机构为了方便会员或成员上传电影或者交流文件,都允许用户的上传权限,因为只有允许这个权限,用户才可以上传文件,但这个权限在允许断点再传的ftp服务器中,可以导致很大的问题出来。允许断点再传…

IE9 IE8 ajax跨域问题的快速解决方

IE9 IE8 ajax跨域问题的快速解决方

解决方法,跨域问题,快速,电脑软件,ajax,网上解决办法均是 在发起请求之前添加 jQuery.support.cors=true;但是,线下测试,是ok的,一放到服务器上,又出现了新的eroor:readyState: 0, status: 0, statusText: "Error: 拒绝访问...最后,问题是这样解…

excel2003保护工作表区域的教程

excel2003保护工作表区域的教程

教程,区域,工作,电脑软件,  Excel中工作表区域如何设置才会被保护呢?下面是小编带来的关于excel2003保护工作表区域的教程,希望阅读过后对你有所启发!excel2003保护工作表区域的教程:  保护工作表区域步骤1:打开Excel表格将选择框点到A8位…

PHP实现的简单适配器模式示例

PHP实现的简单适配器模式示例

适配器模式,示例,简单,电脑软件,PHP,本文实例讲述了PHP实现的简单适配器模式。分享给大家供大家参考,具体如下:<?php//适配器模式-通过适配器去执行第三方方法//定义目标接口interface Target{ public function simpleMethod1(); public fu…