Ich möchte wissen, wie ich meinen Tisch in die Lage versetzen kann, mit Twitter Bootstrap zu sortieren? Was sind die Dinge zu beachten?
Sie müssen jQuery und dataTable.js verwenden.
Sehen wir uns ein Beispiel an:
%Vor%Anzeigegitter: Um das Gitterlayout für die DataTables-Steuerelemente zu definieren, hatten wir früher "span8" -Elemente verwendet, um Elemente mit halber Breite zu bezeichnen, aber mit dem Wechsel zu 12 Spalten im Bootstrap müssen wir nur "span6" verwenden . Also sieht unsere DataTables-Initialisierung folgendermaßen aus:
%Vor%Wir müssen auch eine neue Klasse für das DataTables-Wrapper-Element definieren, damit die Formularelemente inline und nicht als Block angezeigt werden (der Eingabe- und Längenselektor für Tabellenfilterung wird dadurch beeinflusst) "sWrapper" -Klassenoption für die DataTable:
%Vor%Sortieren Bootstrap v2 hat die Unterstützung für TableSorter als Tabellenbibliothek fallen gelassen, und als Ergebnis wurden die Sortierklassen entfernt. Daher müssen wir unseren eigenen Sortierstil definieren, den wir genauso verwenden können wie in den eigenen CSS-Dateien von DataTables (die Bilder sind in der Zip-Datei der DataTables-Distribution in Medien / Bildern verfügbar):
%Vor%Aufräumen Schließlich gibt es zwei Änderungen an meinem CSS-Integration aus der 1.4-Datei, um unser Styling zu vervollständigen:
Entfernen Sie die Breite aus den Klassen dataTables_length und dataTables_filter. Die Updates in Bootstrap bedeuten, dass diese nicht mehr benötigt werden. Die Tischklasse, die ich vorher hatte, hatte "margin: 1em 0;" aber mit den Änderungen ist der visuelle Fluss jetzt besser mit "margin-bottom: 6px! wichtig;"
Überprüfen Sie diese Referenz
Es gibt eine Bibliothek , die die Möglichkeit bietet, mit Bootstrap-Tabellen zu sortieren.
Hier finden Sie eine schnelle Demonstration zur Verwendung.
HTML:
%Vor%JS:
%Vor%HTH.
Tags und Links html css twitter-bootstrap tablesorter