码迷,mamicode.com
首页 > 编程语言 > 详细

jQuery.sort对DOM元素进行排序

时间:2016-11-22 03:19:59      阅读:1151      评论:0      收藏:0      [点我收藏+]

标签:ack   jquery选择器   技术   ndt   pop   valve   个数   选择器   log   

实例:

技术分享

每个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元素进行排序

标签:ack   jquery选择器   技术   ndt   pop   valve   个数   选择器   log   

原文地址:http://www.cnblogs.com/guoyuqi/p/6087696.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!