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

Question

我有一個從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 <tr> 1項（未分類）

Answer 1

小提琴 ： http ： //jsfiddle.net/qNwDe/

我編寫了一個高效的跨瀏覽器方法來對表中的行進行排序。 雙循環中的多個JQuery選擇器導致嚴重的性能問題（正如您所注意到的），因此我擺脫了JQuery。

我的功能的另一個優點是它不介意丟失索引號。 我現在指的是每一行的第一個單元格，而不是按類名獲取元素。 如果你想通過classname引用，我會改變我的功能：

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() 。

Answer 2

嘗試這樣的方法： 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]);
}

Answer 3

我認為在你的情況下有太多的循環。 使用500個項目，您將循環500 * 500 = 250000次。 沒有那么多瀏覽器會知道如何做到這一點。

我建議使用javascript的原生array.sort()方法根據自定義“比較函數”進行排序。

以下是它的完成方式（最有可能是它可以優化）： http ： //jsfiddle.net/tsimbalar/Dw6QE/ 。

我們的想法是對比較sortNumber值的行列表進行排序......

Answer 4

看看這個http://square.github.com/crossfilter/ Square的團隊使用了一個聰明的位圖索引技術，允許在<30ms內過濾5.3MB數據......我不確定這是否有幫助，但它是一個非常有趣的技術

Answer 5

我們可以使用jquery insead of javascript來解決Rob W所回答的問題。它不會影響任何性能問題，例如雙循環中的Multiple 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); 

使用<而不是>進行降序。

小提琴