使用Javascript或jQuery在第一列快速对表进行排序

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

该表如下所示：

  ...  ...  ...  ...  ... 
 
 
 
 
 
 Date 
 
 hours 
 
 
 
 
1
 
 
 
3
 
 
 
2
 
 
 
4
 
 
  

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

我有这个代码来排序它：

  var rows = $('#caltbl > tbody').children('tr').detach(); for (var counter = 1; counter tbody:last').append($(this)); } }); } 

这在Firefox中运行良好，但在Internet Explorer中引起了我的一个主要问题，因为有超过500个项目并且它挂起。 我可以添加一个setTimeout但这不能解决真正的问题。 排序很慢。 什么是更快的排序方式？

而不是必须从

html开始，因为我说它被动态填充，所以我有一个包含html的Array 。 每件

1

1项（未分类）

Answer 1

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

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

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

 function sortTable(){ var tbl = document.getElementById("caltbl").tBodies[0]; var store = []; for(var i=0, len=tbl.rows.length; i 

每当要对表进行排序时，请调用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);