Schnelle HTML-Tabelle Sortieren?

Ja, ich weiß, es gibt eine viel von JS/jQuery-Programme gibt, dies zu tun. Ich bin derzeit mit http://www.kryogenix.org/code/browser/sorttable/sorttable.js . Es ist ganz einfach: nur eine JS-Datei, fügen Sie ein paar Attribute der Klasse auf Ihren Tisch, und Sie sind aus. Insbesondere, Sie nicht wirklich brauchen, zu wissen, JS zu verwenden, und Sie können fügen Sie benutzerdefinierte Schlüssel Sortieren, ohne zu schreiben Sie Ihre eigenen JS zu verlängern. Ich mag es, eine Menge für diese zwei Gründen. Das größte problem: meine Tabelle ist ~9300 Zeilen lang, und das Sortieren dauert 10-20 Sekunden. So Frage ich mich, sind alle anderen scripts gibt, die schneller als diese? Diese sind die, die ich gefunden habe:

http://webfx.eae.net/dhtml/sortabletable/sortabletable.html (Nicht einmal sicher, was dieses verwendet)

http://tablesorter.com/docs/ (Wirklich schön, aber nicht einfach zu verlängern, muss man wissen, JS/jQuery)
http://flexigrid.info/ (Overkill, ich brauche nur eine Tabelle sorter, nicht eine ganze Daten-manipulation-Programm)

http://datatables.net/ (Overkill, erfordert Js/jQuery zu erweitern)

Ich bin sicher, es gibt 5000 andere Programme, die Sie tun können, was ich will, aber ich habe nicht die Zeit, um herauszufinden, und testen Sie Sie alle, um zu sehen, wenn Sie schnell sind. Also ich würde gerne wissen, ob jemand da draußen auf StackOverflow kann mir zu welcher Bibliothek Sie wissen, dass Sie schnell, so dass ich nur noch herauszufinden, wie man ein Programm.

(Btw, ich habe gesehen, Java-Sortieren, Hunderte von tausenden von zahlen in Millisekunden mit quicksort; weiß jemand, was der Algorithmus JS.sort() verwendet?)

Sie hat dies mit jquery, aber es klingt wie Sie wollen, zu nehmen zu vermeiden, die Abhängigkeit... welcher Weg ist es?
Sicher, java Sortieren können Sie schnell zahlen, aber du bist Sortierung der DOM. DOM-Operationen sind langsam. Ihr Problem beginnt mit 9300 Zeilen in einer HTML-Tabelle. Ich würde es Sortieren der server-Seite. Aber wenn Sie nicht wollen, das zu tun, vielleicht ist das speichern der Daten in ein JS-Objekt -, Sortier-und re-rendering der Tabelle jedes mal schneller wäre.
Ja, ich möchte es vermeiden, aber ich werde nichts nehmen, das ist schnell und erfahren, JQuery, wenn nötig.
Ich tun, liefern Sie den HTML-sortiert nach einer Spalte, aber die Daten sind interessant, sortiert aus vielen verschiedenen Spalten. Die JS verwende ich zurzeit liest die HTML, speichert die Eingaben in ein array, und dann wird mit JS die eingebaute sort() auf das array.

InformationsquelleAutor Dubslow | 2012-07-03

8

Ich habe großen Erfolg mit DataTables (ein weiteres jQuery-plugin)) mit ähnlichen Zeilen-Nummern auf, was du redest. Der speed-Verlust sind Sie zu sehen, mit javascript über das, was Sie gesehen haben, in java ist es tatsächlich Rendern DOM, das ist viel mehr Arbeit. Die Schönheit der DataTables ist, haben Sie die Möglichkeit, die Quelle der Daten aus einem javascript-array (im wesentlichen json) - so wird die Sortierung erfolgt auf der Reihe (ähnlich der speed-java), und dann nur der Teil der Tabelle muss der Benutzer, um zu sehen, erzeugt in der DOM.

Sehen diese urls für Beispiele:

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

oder

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

Schlage ich vor, den letzteren. Wenn es noch nicht schnell genug ist, die Verwendung einer statischen json-array Sie erstellen möchten eine serverseitige Skript, um die Belastung aus javascript - tolle Beispiel mit serverseitigem code hier:

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

Edit: Unendlich Scrolling

Diskutiert in den Kommentaren, das problem ist nicht die Art, sondern die Umwandlung der HTML-Tabelle für die JS und zurück. Dies kann helfen, sich von nur be-rendering Teile des zurückgegebenen Art, wie der Benutzer Sie sieht; der server bietet auch die JS die gleichen Informationen wie in der Tabelle in JSON-form. Diese beiden Techniken beseitigen die HTML-JS-Konvertierung und rendering-Probleme, und damit erheblich die Geschwindigkeit erhöhen.

HTML (das ist alles, was gerendert werden muss zunächst, bevor die JSON-kommt zusammen - fügen Sie so viele th-tags als Spalten):
```
<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'
    });
});
```
array.txt enthält:
```
{ "aaData": [
    ["This will be in column 1","This in two","this in 3"],
    ["another row - column 1","another two","another 3"]
]}
```
- Was du also sagst ist, dass das Sortieren ist nicht der schwierige Teil, sondern drehen die 9300 Zeilen HTML-Code in ein array ist, was dauert da so lange? Das ist es, was das erste Glied der Präambel scheint auch zu sagen. In diesem Fall wäre es nicht einfacher für mich, ändern Sie einfach die einfache JS ich habe bereits verwenden, so dass es nicht seine eigene Analyse? Edit: Das ist es, was Christian Varga war zu sagen, wie gut, nicht wahr?
- Die browser Rendern den DOM Tausende von Zeilen, bevor Sie sich zur Ausführung beliebigen javascript-Code ist, was dauert da so lange - dann konvertieren, dass zu einem array wird weiter verlangsamen. Wenn du die Daten in ein array zu beginnen, zu Sortieren, und dann nur bitten, den browser zum Rendern der Zeilen, die Sie brauchen, Sie sollten sehen, eine große Geschwindigkeit zu erhöhen.
- Ja, es ist tatsächlich der browser das Rendern, dauert am längsten, überprüfen Sie dieses jsFiddle: jsfiddle.net/wkndw. Auf meinem Computer die zahlen generiert werden, werden sortiert und an den dom in unter 300ms (entsprechend der profiler), aber es dauert noch eine ganze Menge mehr für Sie zu tatsächlich gerendert werden - im Bereich von Sekunden.
- Jetzt bin ich verwirrt. So wie es jetzt ist, kein JS ist zurzeit noch ausgeführt, es sei denn, der Benutzer klickt auf eine Tabellenüberschrift, aber die Seite lädt einwandfrei (mit allen 9200 Zeilen). Nur wenn ein Benutzer klickt auf einen header zu aktivieren, JS, funktioniert die Seite nicht reagieren, während der JS seine Sache macht. Edit: meinst Du, dass das rendering, was die JS-Art produziert ist, was braucht die Zeit? Das laden der Seite (und alle 9229 Zeilen) dauert < 3 Sekunden.
- Dann sind Sie richtig - es ist Ineffizienz in der Gebäude-array aus dem DOM, und vielleicht auch die Funktion Sortieren. Ich havnt blickte auf die Eingeweide des datatables, um zu sehen, wie Sie sind, handling der Sortierung, aber ich habe erreicht, dyamic Sortierung in einer Tabelle mit über 10.000 Zeilen und führt es auch auf alles mit Ausnahme von älteren Versionen von IE. Ich würde es versuchen, alles, was Sie haben zu tun ist, konvertieren Sie Ihre Tabelle in ein JSON-array und speichern Sie es als text-Datei. Idealerweise verwenden Sie serverseitig zu löschen, die Belastung, die auf js alle zusammen. Wenn der Benutzer neu sortiert haben, rufen Sie einfach eine serverseitige Skript, um die Rückkehr der json in der neuen Ordnung
- Naja, CV ' s link gezeigt, dass JS eingebauten sort(), die ist, was ich jetzt benutze, dauert nur ~350 ms zum Sortieren eine zufällige numerische array von 20.000 Einträge, so dass dann zu Lesen und zu Rendern ist definitiv das problem. Das andere problem ist, dass ich kaum eine Ahnung über die Herstellung einer interaktiven web-server-ich kann kaum HTML, wie es ist. Derzeit meine Tabelle generiert wird, direkt auf HTML-Code aus einem Python-Skript sammelt die Daten aus externen Quellen. Ich könnte leicht auch den JSON-text-Datei, aber selbst dann Rendern das sortierte array ist immer noch ein großes problem.
- Das problem ist möglicherweise die Methode, die Ihr gewählt plugin ist aktuell zum Rendern der Tabelle nach der Art durchgeführt wurde. Diese Methode kann besser für Sie arbeiten: datatables.net/release-datatables/examples/basic_init/... - macht, dass die Daten, die post Sortieren nach etwas - Ansonsten wird Ihre einzige alternative ist die server-Seite.
- Das ist perfekt! Jetzt habe ich just gotta herauszufinden, wie man Datentabellen 😛 vielen Dank! (Wie kann ich upvote Kommentare...?)
- Ihr willkommen. Hinzugefügt volle Erklärung in der Antwort.
- Vorgeben, dass ich es von Ihnen positiv bewertet werden. 😉 Das erfordert 15 Ruf 😛 (PS ich habe ein paar Sätze darüber, was das eigentliche problem ist.)
- Sie haben nun 15 Ruf 🙂
InformationsquelleAutor Chris
0

Abgesehen von den Bibliotheken, der Sortierung der Tabelle ist ganz einfach, um es selbst zu tun.

Die Zeit, die es braucht, um tatsächlich die Zeilen zu Sortieren ist vernachlässigbar in Bezug auf die Zeit, die der DOM muss Objekte verschieben.

Die eine Sache, die Ihnen die beste Leistung, wird zum trennen der Zeilen, ordnen Sie Sie nach Ihren Bedürfnissen und bringen Sie Sie wieder. Sie brauchen keine rohen JSON-Daten, nur trennen Sie die $tr 's, schnappen Sie sich die Werte, die Sie vergleichen möchten aus td' s, ein array von $tr ' s, Sortiere dieses array nach der Spalte, die Sie wollen, und bringen Sie Sie zurück zu Ihrem tbody.

Beispielsweise mit dieser Technik, die ich bin-Sortierung 3000 Zeilen, 15 Spalten in 1 Sekunde Zeit, das ist völlig lebensfähig. Mit dieser Leistung, das problem ist nur, wie fetch 3000 Zeilen an den browser...

InformationsquelleAutor George Mavritsakis
0

Ich denke, dass diese javascript-Bibliothek leicht und leistungsstark:
http://tabulator.info

Tabulator ermöglicht das erstellen von interaktiven Tabellen in Sekunden aus jeder beliebigen HTML-Tabelle, JavaScript-Array, AJAX data-source-oder JSON-formatierte Daten.

Innerhalb der Zellen können Sie einen text, Fortschrittsbalken, Bilder, weitere Tabellen!

InformationsquelleAutor Massimo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Edit: Unendlich Scrolling