Szybkie sortowanie tabeli HTML?

Question

Tak, wiem, że istnieje tam lot programów JS/jQuery, aby to zrobić. Obecnie używam http://www.kryogenix.org/code/browser/sorttable/sorttable.js. To bardzo proste: wystarczy plik JS, dodaj kilka atrybutów klas do swojego stołu i już jesteś wolny. W szczególności nie musisz znać JS, aby z niego korzystać, i możesz dodać niestandardowe klucze sortowania bez potrzeby pisania własnego JS, aby je rozszerzyć. Bardzo lubię to z tych dwóch powodów. Główny problem: mój stół ma ~ 9300 rzędów, a sortowanie zajmuje 10-20 sekund. Zastanawiam się, czy są jakieś inne skrypty szybciej niż to? Są to te znalazłem:

http://webfx.eae.net/dhtml/sortabletable/sortabletable.html (nawet nie jestem pewien, co to wykorzystuje)
http://tablesorter.com/docs/ (naprawdę bardzo miły, ale nie łatwo rozszerzyć, wymaga znajomości JS/jQuery) http://flexigrid.info/ (Overkill, tylko trzeba sorter stół, a nie cały program manipulacji danymi)
http://datatables.net/ (Overkill, wymaga Js/jQuery rozszerzenie)

Jestem pewien, że 5000 inne programy, które mogą robić to, co chcę, ale ja nie mam czas wymyślić i przetestować je wszystkie, aby sprawdzić, czy są szybkie. Dlatego chciałbym wiedzieć, czy ktoś na StackOverflow może wskazać mi bibliotekę, o której wiedzą, że jest szybki, więc muszę tylko wymyślić, jak korzystać z jednego programu.

(Btw, widziałem Java sortowania setki tysięcy numerów w milisekundach z quicksort, czy ktoś wie, co wykorzystuje algorytm JS.sort()?)

Answer 1

Miałem wielki sukces z DataTables (inny jQuery wtyczka) z podobnymi numerami wierszy do tego, o czym mówisz. Utrata prędkości, którą widzisz z javascript nad tym, co widziałeś w java, polega na renderowaniu DOM, który jest o wiele więcej pracy. Piękno DataTables to możliwość pozyskania danych z tablicy javascript (zasadniczo json) - więc sortowanie odbywa się w tablicy (prędkość zbliżona do java), a następnie tylko część tabeli, którą użytkownik musi zobaczyć jest generowany w DOM.

Zobacz Adresy te przykłady:

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

lub

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

Proponuję przy użyciu tego ostatniego. Jeśli jej nie jeszcze wystarczająco szybko przy użyciu statycznej tablicy json, będziemy chcieli, aby zbudować skrypt po stronie serwera do Zdejmij obciążenie JavaScript - świetny przykład z kodem stronie serwera tutaj:

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

EDIT: Nieskończone przewijanie

Jak wspomniano w komentarzach, problemem nie jest sortowanie, ale konwersja tabeli HTML na JS iz powrotem. Może to pomóc, ładując tylko renderujące części zwróconego sortowania, gdy użytkownik je przegląda; serwer dostarcza również JS te same informacje, co tabela w formularzu JSON. Te dwie techniki eliminują problemy z konwersją i renderowaniem HTML-JS, a tym samym znacznie zwiększają szybkość.

HTML (jest to wszystko, co ma zostać wygenerowana początkowo przed JSON przyjdzie - dodać tyle znaczników th jak masz kolumny):

<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' 
    }); 
}); 

tablicą. txt zawiera:

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

Answer 2

Oprócz bibliotek sortowanie stołów jest dość łatwe.

Czas potrzebny na faktyczne posortowanie rzędów jest nieistotny w stosunku do czasu, w którym DOM musi przenieść elementy.

Jedną z rzeczy, która zapewni Wam najlepszą wydajność, jest oderwanie rzędów, ułożenie ich zgodnie z potrzebami i ponowne zamocowanie. Nie potrzebujesz surowych danych JSON, po prostu odłączamy $ tr's, chwyć wartości, które chcesz porównać z td, utwórz tablicę $ tr's, posortuj tę tablicę zgodnie z żądaną kolumną i dołącz ją do swojego tbody.

Na przykład za pomocą tej techniki sortuję 3000 rzędów po 15 kolumn w czasie 1 sekundy, co jest całkowicie wykonalne. Z tą wydajnością, jedynym problemem jest pobranie 3000 wierszy do przeglądarki ...