使用Javascript或jQuery在第一列快速对表进行排序 [英] Sort a table fast by its first column with Javascript or jQuery

问题描述

我有一个从 FullCalendar 动态填充的表格。
问题是 FullCalendar 并不关心其原始订单。

I have a table which is dynamically populated from FullCalendar. The problem is that FullCalendar does not care about its original order.

该表看起来像这样：

<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>

每行的第一行包含表格应该排序的数字。

The first of each row contains the number on which the table should be sorted.

我有这个代码来对它进行排序：

I had this code to sort it:

    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 ，但这不能解决真正的问题。 排序很慢。有什么更快的方式对此进行排序？

This works fine in Firefox but causes me a major headache in Internet Explorer because there are more than 500 items and it hangs. I could add a setTimeout but that would not fix the real problem. The sorting is slow. What is a faster way to sort this?

而不必从< table> html，正如我所说，它会动态填充，所以我有一个包含html的 Array 。 1件商品< tr> （未分类）

Instead of having to start from the <table> html, as I said it gets populated dynamically so I have an Array which contains the html. 1 item per <tr> (unsorted)

推荐答案

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

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

I've written an efficient, cross-browser method to sort the rows in your table. Multiple JQuery selectors in double loops are causing serious performance issues (as you've noticed), hence I've get rid of JQuery.

我的函数的另一个优点是它不介意缺少索引号。我目前指的是每行的第一个单元格，而不是按类名获取元素。如果你想通过classname引用，我将改变我的功能：

An additional advantage of my function is that it doesn't mind missing index numbers. I'm currently referring to the first cell of each row, rather than getting the element by class name. If you want to refer by classname, I will alter my function:

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（）每当你想对表格进行排序时。

Call sortTable() whenever you want to sort the table.

这篇关于使用Javascript或jQuery在第一列快速对表进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！