实例:

每个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. 关于NOMINMAX这个预处理宏

    标准库在<algorithm>头中定义了两个模板函数std::min() 和 std::max().通常用它可以计算某个值对的最小值和最大值.可惜在 Visual C++ 无法使用它们,因 ...

  2. (译)Windsor入门教程---第四部分 整合

    介绍:     目前为止,已经介绍了应用程序的各个部分.首先是添加了Windsor程序集,然后是添加了控制器工厂,还添加了installer类来注册控制器.虽然但是我们还没用在应用程序中调用他们.在这 ...

  3. 安装PIL遇到的问题

    配置:Win7 64位 不过折腾到最后,没有使用PIL,官方的PIL很久木有更新了,换了Pillow,是PIL的衍生吧,一直有更新,但是两者不可在同一环境共存. 1 Python version 2. ...

  4. 关于 HTML5、Jquery、Phonegap 跨域问题的研究

    近期研究Phonegap的相关技术,遇到了服务资源访问的跨域.经过尝试使用服务器端的代理,Phonegap打包后不能够访问到相应资源.在搜索引擎的帮助下,找到了Jquery的jsonp的方式,尝试发现 ...

  5. JSON的BUG

    问题描述: method_cfg["input_method"][0].asString() 报错误: test1.cpp:40:46: error: ambiguous over ...

  6. Servlet实现文件上传(多文件)(三)

    1.上传文件的页面fileUpload2.jsp <%@ page language="java" import="java.util.*" pageEn ...

  7. (简单) HDU 3308 LCIS,线段树+区间合并。

    Problem Description Given n integers. You have two operations: U A B: replace the Ath number by B. ( ...

  8. 【spoj8222】 Substrings

    http://www.spoj.com/problems/NSUBSTR/ (题目链接) 题意 给出一个字符串S,令${F(x)}$表示S的所有长度为x的子串出现次数的最大值.求${F(1)..... ...

  9. mysql 安装错误 解决方法

    错误及警告信息:TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defaults_for_time ...

  10. Linux内核探索之路——关于方法

    转载自:http://blog.chinaunix.net/uid-20608849-id-3014502.html   Linux内核实践之路 -给那些想从Linux内核找点乐趣的人 一个不能回避的 ...