Share
Was Sie erstellen werdenTablesorter ist ein unkompliziertes jQuery-Plugin, das dynamische Spaltensortierung und -pagination in Ihren HTML-Tabellen ermöglicht. Es ist eine gute Möglichkeit, sortierbare, skriptbasierte Tabellen bereitzustellen, bei denen der Benutzer die Seite nicht aktualisieren muss. Sie können es auch verwenden, wenn Sie Ajax in Ihrer Anwendung verwenden.
Dieses Tutorial zeigt den aktuellen Code und drei Beispiele für die Verwendung von Tablesorter. Sie können den Code bei GitHub herunterladen. Beachten Sie, dass beim Tablesorter-Download tatsächlich einige Grafiken für die Pager fehlen, sodass Sie meine GitHub-Dateien verwenden möchten.
Mein erstes Beispiel zeigt Ihnen, wie Sie Tablesorter verwenden können, um eine sortierbare Liste der zum Verkauf angebotenen Internetdomänen bereitzustellen. Sie können die Demo hier und den Code hier sehen.
Es gibt einige Komponenten, die wir für Tablesorter einrichten müssen. Zunächst müssen wir jQuery und das Tablesorter-Plugin laden. Ich werde auch das blaue CSS-Theme laden:
Dann bauen wir die Tabellen-HTML auf:
| Domänenname | gTld | Kategorie | Preis | Kontakt |
|---|---|---|---|---|
| geogram.co | co | Internet | $ 49 | Kauf |
| newscloud.com | com | Nachrichten | 19999 $ | Kauf |
| popcloud.com | com | Musik | 14999 US-Dollar | Kauf |
Danach müssen wir Tablesorter beim Laden der Seite initialisieren:
Im obigen Beispiel setze ich die vierte Spalte, die Preisspalte, auf absteigende Reihenfolge und die dritte Spalte, die Kategoriespalte, aufsteigend.
Sobald Sie fertig sind, sollten Sie so etwas sehen:
Wenn Sie Ihre Tabellen nicht dynamisch aus einer Datenbank laden, fragen Sie sich vielleicht, ob es einfacher ist, HTML-Tabellencode aus langen Listen zu generieren. Es gibt! Ich beschreibe es in Parken, Auflisten und Verkaufen Ihrer Domains.
Grundsätzlich verwende ich eine Google Drive-Tabelle, in der meine Domains, Kategorien und Preise aufgeführt sind, und ich verwende Funktionen, um Apache-Server-Aliase, JavaScript-Preiscode und den Tabellenzeilen-HTML der Tablesorter-Tabelle zu generieren:
So sieht eine Verkettungsfunktion in Google Drive aus:
Accentsconagua
= CONCATENATE ("","", F2" ",""B2" ",""D2" ","$ ", TO_DOLLARS (E2)" ","", G2" "," ")Ich verwende das auf Envato Market verfügbare Domena-Design als Zielseite für jede Domain:
Ich habe JavaScript im Design angepasst, um den Preis basierend auf der geladenen Domäne zu ändern. Ich denke, dass die neueren Versionen von Domena mehrere Domains eleganter handhaben.
Jetzt zeigen wir Ihnen, wie Sie Paging mit Tablesorter implementieren. Sie können die Demo hier sehen und den Code hier erhalten. Es sollte ungefähr so aussehen:
Diesmal initialisieren wir den Tablesorter im Etikett. Wir fügen auch das Tablesorter-Plugin-Skript hinzu:
Wir werden das HTML platzieren div für den Pager unterhalb der Tabelle:
Das ist es.
Ich habe festgestellt, dass die Pager-Icons von der Tablesorter GitHub-Site gelöscht wurden. Daher habe ich sie manuell von der Demo heruntergeladen. Es ist möglicherweise am einfachsten, sie aus der gegabelten Version des Tuts + -Repositorys zu beziehen.
Im Folgenden wird beschrieben, wie Sie mit jQuery eine Tablesorter-Tabelle dynamisch füllen. Zu Beginn initialisieren wir eine Tablesorter-Tabelle nur mit .IO-Domänen. Es wird ungefähr so aussehen:
Wenn Sie auf klicken Fügen Sie .COM-Domains hinzu Link wird die Tabelle mit .COM-Domänen erweitert.
Sie können die Demo hier und den Code hier sehen. Das HTML für die Ajax-Anfrage mit den .COM-Domains finden Sie hier.
Hier ist der Code, der auf das Ereignis click reagiert und zusätzliche Zeilen über Ajax lädt:
p> Fügen Sie über AJAX .COM-Domains hinzu
Tablesorter kann die Benutzererfahrung definitiv verbessern, wenn sie gut genutzt wird.
Ich hoffe, Sie fanden dieses Tutorial hilfreich. Bitte zögern Sie nicht, Korrekturen, Fragen oder Kommentare zu posten. Sie können mich auch auf Twitter @reifman erreichen oder mich direkt per E-Mail kontaktieren.
