实例:

每个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元素进行排序的更多相关文章

  1. JQuery利用sort对DOM元素进行排序

    前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来 ...

  2. jQuery操作得到DOM元素

    jQuery再DOM操作方面提供了一些函数及其用法,这里就对DOM元素的包装简单说明一下,怎样使用会了,对其它方法也能灵活的使用.以下是一个小样例及其效果图. 代码例如以下: <html xml ...

  3. jquery插件——检测DOM元素是否在浏览器可视范围之内

    引言 web应用中有很多地方会用到打点,用来检测用户行为,今天就做了个打点相关的需求,为了统计一个广告给用户的展示次数,每次用户请求完成并且渲染完成之后就算一次成功的展示,其实有时候这个广告还没有在用 ...

  4. jQuery捕获-获取DOM元素内容和属性

    一.获取内容 1.text()-设置或返回所选元素的文本内容 2.html()-设置或返回所选元素的内容(包括HTML标记) 3.val()-设置或 返回表单字段的值 $(document).read ...

  5. jQuery 数据 DOM 元素 核心 属性

    jQuery 参考手册 - 数据 .clearQueue() 从序列中删除仍未运行的所有项目 .clearQueue(queueName) $("div").clearQueue( ...

  6. 使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小

    使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素 然后:secti ...

  7. Vue动态设置Dom元素宽高

    需求: slider侧边栏是宽度是动态的,使用jquery可以操作dom元素,设置宽高,但vue是避免操作dom的 <template> <div class="slide ...

  8. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  9. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

随机推荐

  1. iOS中正则表达式的三种使用方式

    1.利用NSPredicate(谓词)匹配 例如匹配有效邮箱: NSString *email = @“nijino_saki@163.com”: NSString *regex = @"[ ...

  2. iOS给自定义个model排序

    今天有朋友问我怎么给Model排序,我顺便写了一个,伸手党直接复制吧. 例如,我建了一个Person类,要按Person的年龄属性排序: Person *per = [[Person alloc] i ...

  3. 2017 ZSTU寒假排位赛 #2

    题目链接:https://vjudge.net/contest/147632#overview. A题,状态压缩一下然后暴力即可. B题,水题,略过. C题,有负数,前缀和不是单调的,因此不能用尺取法 ...

  4. jenkins 构建时,取消构建测试类

    如图 点击配置,添加clean install  -Dmaven.test.skip=true 保存即可

  5. html 上传文件

    1.html代码 <form id="form1" action="TestYield" method="post" enctype= ...

  6. VMWare虚拟机启动报错物理内存不足

    尝试了三种修改 1.说是微软补丁KB2995388冲突-->>失败 2.修改win8.1高级环境性能更改设置-->>失败 3.修改config.ini文件-->>成 ...

  7. Jquery的AJAX应用详解

    案例一:取得服务端当前时间 简单形式:jQuery对象.load(url),返回结果自动添加到jQuery对象代表的标签中间 <body> 当前时间: <span id=" ...

  8. SVN简明课程

    Reference: http://www.cnblogs.com/wangkangluo1/archive/2011/08/11/2135312.html 1. 版本控制介绍 1.1. 什么是版本控 ...

  9. CSS3 Transitions 你可能不知道的知识点

    如何临时让transition失效 我们给一个element设置了transition效果,但某些特殊情况,我们希望让transition临时失效.我们第一反应就是先移除transition设置,等其 ...

  10. zabbix3.0.4 部署History

    [root@zabbix-Test ~]# history     1  passwd root    2  exit    3  yum  install ntpd*    4  yum  inst ...