使用Javascript或jQuery按表的第一列快速排序

Sort a table fast by its first column with Javascript or jQuery

本文关键字：快速排序 一列 Javascript jQuery 使用      更新时间：2023-09-26

我有一个从FullCalendar动态填充的表。问题是FullCalendar不关心其原始顺序。

表格如下：

<table id="caltbl">
   <thead>
       <tr> <th> </th>   <th> Date </th>   <th> hours </th>  ... </tr>
   </thead>
   <tbody>
       <tr> <td class="sortnr">1</td>   <td></td> ... </tr>
       <tr> <td class="sortnr">3</td>   <td></td> ... </tr>
       <tr> <td class="sortnr">2</td>   <td></td> ... </tr>
       <tr> <td class="sortnr">4</td>   <td></td> ... </tr>
   </tbody>
</table>

每一行的第一行包含表应该排序的编号。

我有这样的代码来排序：

    var rows = $('#caltbl > tbody').children('tr').detach();
    for (var counter = 1; counter<=rows.length; counter++) {
        $(rows).each(function(index) {
            if ($(this).find(".sortnr").text()==counter){
               $('#caltbl > tbody:last').append($(this));
            }
        });
    }

这在Firefox中运行良好，但在Internet Explorer中让我非常头疼，因为有500多个项目，而且它挂起了。我可以添加一个setTimeout，但这并不能解决真正的问题排序很慢。有什么更快的排序方法

不必从<table>html开始，正如我所说，它是动态填充的，所以我有一个包含html的Array。每个<tr>(未排序( 1个项目

Fiddle：http://jsfiddle.net/qNwDe/

我已经编写了一个高效的跨浏览器方法来对表中的行进行排序。双循环中的多个JQuery选择器会导致严重的性能问题(正如您所注意到的(，因此我去掉了JQuery。

我的函数的另一个优点是它不介意遗漏索引数字。我现在引用的是每行的第一个单元格，而不是按类名获取元素。如果你想用类名引用，我会更改我的函数：

function sortTable(){
    var tbl = document.getElementById("caltbl").tBodies[0];
    var store = [];
    for(var i=0, len=tbl.rows.length; i<len; i++){
        var row = tbl.rows[i];
        var sortnr = parseFloat(row.cells[0].textContent || row.cells[0].innerText);
        if(!isNaN(sortnr)) store.push([sortnr, row]);
    }
    store.sort(function(x,y){
        return x[0] - y[0];
    });
    for(var i=0, len=store.length; i<len; i++){
        tbl.appendChild(store[i][1]);
    }
    store = null;
}

只要您想对表进行排序，就调用sortTable()。

尝试这样的方法：http://jsfiddle.net/qh6JE/

var rows = $('#caltbl > tbody').children('tr').get(); // creates a JS array of DOM elements
rows.sort(function(a, b) {  // use a custom sort function
    var anum = parseInt($(a).find(".sortnr").text(), 10);
    var bnum = parseInt($(b).find(".sortnr").text(), 10);
    return anum-bnum;
});
for (var i = 0; i < rows.length; i++) {  // .append() will move them for you
    $('#caltbl > tbody').append(rows[i]);
}

我认为在您的案例中有太多的循环。对于500个项目，您将循环500*500=250000次。没有那么多浏览器知道如何做到这一点。

我建议使用javascript的原生array.sort()方法，根据自定义的"比较函数"进行排序。

以下是如何做到这一点(而且很可能是可以优化的(：http://jsfiddle.net/tsimbalar/Dw6QE/.

其想法是对行列表进行排序，比较sortNumber值。。。

我们可以使用javascript的jquery insead来处理Rob W回答的相同问题。它不会影响任何性能问题，比如双循环中的多个jquery选择器。

var $tbody = $('table tbody');
            $tbody.find('tr').sort(function (a, b) {
                var tda = $(a).find('td:eq(' + ColumnIndex + ')').text(); // Use your wished column index
                var tdb = $(b).find('td:eq(' + ColumnIndex + ')').text(); // Use your wished column index
                // if a < b return 1
                return tda > tdb ? 1
                       // else if a > b return -1
                       : tda < tdb ? -1
                       // else they are equal - return 0    
                       : 0;
            }).appendTo($tbody);

使用<而不是>表示递减。

FIDDLE

看看这个http://square.github.com/crossfilter/Square的团队使用了一种巧妙的位图索引技术，允许在<30毫秒。。。我不确定这是否有帮助，但这是一种非常有趣的技术

相关文章：