jQuery.sort对DOM元素进行排序

Posted 2020-08-20

实例：

每个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元素进行排序，而不用再次请求后台，在后台重新查数据进行排序，然后再在前台显示，大大减轻了服务器的负担。
效果图如下（忽略界面是否好看，重在看结果）：
未排序前：

升序排序后： 

降序排序后：