JQuery / Javascript Neuanordnen von Zeilen

Mach einfach so etwas:

Sagen Sie, Sie haben einen Tisch wie folgt:

Und ein Array mit der neuen Reihenfolge wie folgt:

Dann tue etwas wie dieses (nicht getestet, also musst du vielleicht den Code optimieren, aber das ist die Idee):

Auf diese Weise werden sie der Reihe nach ans Ende der Tabelle verschoben.

Sie werden also 3 bis zum Ende haben, dann 4 dahinter, dann 2 dahinter, usw. Nachdem sie ALLE am Ende der Tabelle angehängt haben, wird die erste werden die erste Reihe, und der Rest wird in der richtigen Reihenfolge dahinter sein.

Bearbeiten:

Machen Sie den Tabellenstil = 'display: none;' und dann $ ('# table'). show (); beim Start.

Nochmals bearbeiten: Du könntest einen div um den gesamten Körperinhalt machen, wie

Damit die gesamte Seite für den Bruchteil einer Sekunde ausgeblendet wird (nur leeres Weiß), muss die Tabelle geladen und geordnet werden.

Dann würden Sie verwenden:

Um die gesamte Seite auf einmal anzuzeigen, sobald das DOM bereit ist. Es dauert einen Bruchteil einer Sekunde länger, um die Seite zu laden, aber es wird alle gleichzeitig geladen, so dass es keinen Blitz von fehlenden Tabellen etc. geben wird. Solange ALLES in #alles ist, wird es einfach aussehen wie die geladene Seite - sollte für den Betrachter transparent sein.

Warum bestellen Sie nicht die Zeilen auf der Serverseite? Wenn Sie sie mit JQuery neu sortieren, sobald die Seite geladen ist, ist es effizienter, diesen Job im Servercode auszuführen, insbesondere wenn die ausgewählte Bestellung des Benutzers in einer Datenbank gespeichert ist.

Probieren Sie das jQuery Tablesorter-Plugin aus.

Wenn das Dokument geladen wird, können Sie die Tabelle sortieren, indem Sie den Spaltenindex angeben, nach dem sortiert werden soll (und das Sortieren nach mehreren Spalten ermöglicht):

Überprüfen Sie das jQuery TableSorter-Plugin , es ist sehr leistungsfähig, es erkennt die zugrunde liegenden Datentypen der Spalten und Sie können Ihre Tabellenspalten programmgesteuert sortieren :

Denken Sie daran, dass das Aufzeichnen auf der Client-Seite sich auf drei Arten offen für Probleme macht.

1. Wenn der Clientcomputer langsam ist, kann diese Neuanordnung sichtbar sein, egal was Sie tun.
2. Je größer die Datentabelle wird, desto langsamer wird diese Aktion und desto besser ist die Neuordnung.
3. Der Client könnte JS deaktiviert haben, was Ihre Neuanordnung unterbrechen würde.

Obwohl es scheint, dass Sie diese Client-Seite tun wollen, um sich ein paar Kopfschmerzen bei der serverseitigen Programmierung zu ersparen, werden Sie diese Probleme auf lange Sicht vermeiden, indem Sie etwas Zeit darauf verwenden, um es serverseitig zu bekommen. p>

Wenn Sie Probleme haben, den serverseitigen Code mit Ihren benutzerdefinierten Steuerelementen zu aktivieren, geben Sie ihn ein und wir helfen Ihnen dabei.

Arbeitsbeispiel. Durchlaufen Sie einfach eine Liste mit der neuen Bestellung (die Sie vermutlich aus der Datenbank gelesen haben) und erstellen Sie die neue Tabelle. Setzen Sie dann die Tabelle html () auf die neue Tabelle html.

Wenn die letzte vom Benutzer vorgenommene Sortierung als Liste mit der Zeilen-ID gespeichert wird, können Sie Folgendes tun:

Auf diese Weise werden die Zeilen aus ihrer aktuellen Position herausgenommen und innerhalb der Tabelle in der Reihenfolge ersetzt, in der sie in der Datenbank gespeichert sind.

  

EDIT AppendTo-Methode funktioniert. In der kurzen Verzögerung der Neuanordnung der Zeilen auf der Client-Seite sehe ich jedoch die Zeilen in ihrer ursprünglichen Reihenfolge für etwa eine halbe Sekunde, bevor die Neuordnung abgeschlossen ist. Dieses Verhalten der Benutzeroberfläche ist stärker ausgeprägt, da die Seite keine Postbacks verwendet. Irgendeine Abhilfe dafür?

Anzeige einstellen: keine auf dem Tisch mit css. Wenn das Ereignis document ready ausgelöst wird, verwenden Sie die Methode appendTo. Die zeigen auf dem Tisch. Sie können ein anderes style-Tag mit display setzen: block auf der Tabelle in <noscript> , falls js deaktiviert ist.