jQuery.sort对DOM元素进行排序
实例:
每个tr的第三列显示的都是数字,我们就以这数字列作为排序依据,方法就是利用jquery的sort()方法。
首先,利用jquery选择器获取每个tr元素,获取回来是一个数据:
var $trs = $('#dataTable_table tbody tr');
然后通过调用jquery的sort()方法进行排序,sort()方法接收的参数是一个方法,该方法就是实现排序的逻辑:
$trs.sort(function(a,b){
var valveNumOfa = $(a).find('td:eq(2)').text();
var valveNumOfb = $(b).find('td:eq(2)').text();
if(parseInt(valveNumOfa) < parseInt(valveNumOfb)) return -1;
else return 1;
});
这样就实现了dom元素的排序。
这里实现的是升序排序,如果需要降序排序,if-else这样写:
if(parseInt(valveNumOfa) < parseInt(valveNumOfb)) return 1;
else return -1;
至此,dom元素已经排好序了,最后一步就是把这好序的dom节点重新拼回table里:
$trs.detach().appendTo('#dataTable_table tbody');
OK,大功告成,这样就实现了在前端对dom元素进行排序,而不用再次请求后台,在后台重新查数据进行排序,然后再在前台显示,大大减轻了服务器的负担。
效果图如下(忽略界面是否好看,重在看结果):
未排序前:
升序排序后:
降序排序后:
jQuery.sort对DOM元素进行排序的更多相关文章
- JQuery利用sort对DOM元素进行排序
前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来 ...
- jQuery操作得到DOM元素
jQuery再DOM操作方面提供了一些函数及其用法,这里就对DOM元素的包装简单说明一下,怎样使用会了,对其它方法也能灵活的使用.以下是一个小样例及其效果图. 代码例如以下: <html xml ...
- jquery插件——检测DOM元素是否在浏览器可视范围之内
引言 web应用中有很多地方会用到打点,用来检测用户行为,今天就做了个打点相关的需求,为了统计一个广告给用户的展示次数,每次用户请求完成并且渲染完成之后就算一次成功的展示,其实有时候这个广告还没有在用 ...
- jQuery捕获-获取DOM元素内容和属性
一.获取内容 1.text()-设置或返回所选元素的文本内容 2.html()-设置或返回所选元素的内容(包括HTML标记) 3.val()-设置或 返回表单字段的值 $(document).read ...
- jQuery 数据 DOM 元素 核心 属性
jQuery 参考手册 - 数据 .clearQueue() 从序列中删除仍未运行的所有项目 .clearQueue(queueName) $("div").clearQueue( ...
- 使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小
使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素 然后:secti ...
- Vue动态设置Dom元素宽高
需求: slider侧边栏是宽度是动态的,使用jquery可以操作dom元素,设置宽高,但vue是避免操作dom的 <template> <div class="slide ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- jQuery操作DOM元素
作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...
随机推荐
- D. PolandBall and Polygon BIT + 欧拉公式
http://codeforces.com/contest/755/problem/D // 我也觉得非平面图不能用欧拉公式,但是也能过,不知道为什么.求大佬留言. 这题其实就是平面图,因为它有很多个 ...
- matlab获取向量中出现次数最多的元素
向量X 1. tabulate(X) 返回一个矩阵:第一列为元素值,第二列为相应元素出现个数,第三列为相应元素个数占所有元素个数百分比 table = tabulate(X); %获取出现次数最多的元 ...
- iOS开发——Xcode快捷键
1.共用的一些方法 Command + A: 全选Command + C: 复制Command + V: 粘贴Command + X: 剪切Command + Z: 撤销Shift + Command ...
- eclipse手动安装svn和maven
一.给Eclipse安装SVN,最常见的有两种方式:手动方式和使用安装向导方式.具体步骤如下: 方式一:手动安装 1.从官网下载site-1.6.9.zip文件,网址是:subclipse.tigri ...
- VS2010环境下使用VB编写串口助手
1.在Form1的设计模式下添加以下控件: 2.添加好控件之后我们就可以打开Form1.vb进行编程了: '使用串口需要引用的命名空间 Imports System.IO.Ports Imports ...
- Centos7.2 编译安装PHP7
PHP7,编译安装: 环境:centos7.2 (注意:因为我用的nginx, 此配置参数没有考虑到apache,所以不合适需要用apache的朋友照搬过去运行,但是可以参考.) 直接下载P ...
- HTML5学习笔记三:aside元素,time元素与微格式
一.aside元素 表示当前页面或文章的附属信息部分,相关的引用,侧边栏,广告等有别于主要内容的部分:主要有一下两种用法: 1. 被包含在article元素中作为主要内容的附属信息部分,可以是与当前文 ...
- HTML/CSS/JavaScript学习总结(转)
HTML 网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构: – 用CSS描述网页的排版布局: – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序 H ...
- js原生写的微博留言板有angularjs效果
1.HTML: <!DOCTYPE html><html><head lang="en"> <meta charset=" ...
- css3实战版的点击列表项产生水波纹动画
1.html+js: <!DOCTYPE html><html><head lang="en"> <meta charset=&qu ...