是的，我知道有一個很多的JS/jQuery程序要做到這一點。我目前使用http://www.kryogenix.org/code/browser/sorttable/sorttable.js。這很簡單：只需要一個JS文件，爲你的表添加一些類屬性，然後關閉。特別是，你實際上並不需要知道JS來使用它，並且你可以添加自定義的排序鍵，而無需編寫自己的JS來擴展它。我非常喜歡這兩個原因。主要問題：我的表格大約有9300行，排序需要10-20秒。所以我想知道，有沒有比這更快的任何其他腳本？這是我發現的：快速HTML表格排序？

http://webfx.eae.net/dhtml/sortabletable/sortabletable.html（甚至不知道這是什麼用途）
http://tablesorter.com/docs/（真的很不錯，但不容易擴展，需要知道JS/jQuery的） http://flexigrid.info/（矯枉過正，我只需要一臺分揀機，而不是整個數據處理程序）
http://datatables.net/（矯枉過正，需要JS/jQuery的延長）

我敢肯定有5000個，可以做我想做的其他程序，但我沒有有時間弄清楚並測試它們，看看它們是否快速。因此，我想知道是否有人在StackOverflow上可以指示我知道哪個庫是快速的，所以我只需要弄清楚如何使用一個程序。

（順便說一句，我見過的Java類型的數十萬數與快速排序毫秒;沒有人知道哪種算法JS.sort（）使用？）

來源

2012-07-03 Dubslow

你用jquery標記了這個，但它聽起來像你想避免採取這種依賴......這是哪種方式？ –

當然，Java可以快速排序*數字*，但是您正在排序* DOM *。 DOM操作緩慢。您的問題始於HTML表格中的9300行。我將它排列在服務器端。但是，如果你不想這麼做，那麼可能將數據存儲在一個JS對象中，對數據進行排序，並且每次重新繪製表格都會更快。 –

@Robert：是的，我想避免它，但我會採取任何快速的事情，並在必要時學習JQuery。 – Dubslow

我已經取得了巨大的成功與數據表（jQuery的另插件）與你正在談論的行號相似。使用JavaScript看到的在java中看到的速度損失實際上是渲染一個DOM，這是更多的工作。 DataTables的優點是你有能力從一個javascript數組（基本上是json）中獲取數據 - 所以排序在數組上完成（類似於java的速度），然後只有用戶需要查看的表的部分在DOM中生成。

示例請參見這些網址：

http://datatables.net/examples/data_sources/js_array.html

或

http://datatables.net/examples/data_sources/ajax.html

我建議使用後者。如果它仍然不夠快使用靜態JSON數組，你會想建立一個服務器端腳本來帶負載過的javascript - 與服務器端代碼在這裏很好的例子：

http://datatables.net/examples/data_sources/server_side.html

編輯：無限滾動

正如評論中所討論的，問題不在於排序，而是將HTML表格轉換爲JS並返回。這可以通過在用戶查看它時僅加載返回的排序的渲染部分來提供幫助;服務器還爲JSON提供與JSON形式的表相同的信息。這兩種技術消除了HTML-JS轉換和渲染問題，從而大大提高了速度。

HTML（這是所有有最初呈現的JSON到來之前一起 - 如果有列添加許多個標籤）：

<table id="table_id"> 
    <thead> 
     <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
      <th>etc</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table>

JQUERY：

$(document).ready(function() { 
    $('#table_id').dataTable({ 
     "bScrollInfinite": true, 
     "bScrollCollapse": true, 
     "sScrollY": "200px", 
     "bProcessing": true, 
     "sAjaxSource": 'array.txt' 
    }); 
});

陣列。 txt包含：

{ "aaData": [ 
    ["This will be in column 1","This in two","this in 3"], 
    ["another row - column 1","another two","another 3"] 
]}

來源

2012-07-03 05:13:58 Chris

所以你說的是排序不是最難的部分，而是把9300行的HTML變成一個數組是什麼花了這麼久？這也是第一個環節的序言似乎也是這樣說的。在那種情況下，對於我來說，修改我已經使用的簡單JS是不是更容易，這樣它就不會執行自己的解析了？編輯：這就是Christian Varga所說的，不是嗎？ – Dubslow

甚至在執行任何JavaScript之前，瀏覽器呈現成千上萬行的DOM是需要這麼長時間的 - 然後將其轉換爲數組將進一步減慢速度。如果您在數組中提供數據以進行排序，然後只要求瀏覽器渲染所需的行，就會看到速度的大幅增加。 – Chris

是的，它實際上是瀏覽器的渲染時間最長，請檢查此jsFiddle：http://jsfiddle.net/wkndw/。在我的機器上，數字被生成，排序並在300毫秒以內追加到dom中（根據探查器），但實際渲染需要相當長的時間 - 在幾秒鐘內。 –

除了圖書館，表格排序很容易自己做。

實際排序行所需的時間與DOM需要移動項目的時間相比可以忽略不計。

會給你最好的性能的一件事是分離行，根據你的需要安排它們並重新附加它們。您不需要原始的JSON數據，只需分離$ tr，從td中獲取想要比較的值，創建一個$ tr的數組，根據所需的列對該數組進行排序並將它們附加回您的tbody。

例如，使用這種技術，我在1秒鐘內排序了3000行15列，這是完全可行的。有了這樣的性能，唯一的問題是如何獲取3000行到瀏覽器...

來源

2014-10-13 23:28:38

快速HTML表格排序？

回答

編輯：無限滾動

相關問題