Wie kann ich Tabellen mit Twitter Bootstrap sortieren lassen?

Question

Ich möchte wissen, wie kann ich meine Tabelle in der Lage sein, mit Twitter Bootstrap zu sortieren? Was sind die Dinge zu beachten?

Answer 1

Sie müssen jQuery und dataTable.js verwenden.

sich ein Beispiel siehe:

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example"> 

Raster anzeigen: das Raster-Layout für die Datentabellen Kontrollelemente zu definieren, zuvor hatten wir „span8“ Elemente verwendet, um Halbwertsbreite Elemente, jedoch mit der Änderung bis 12 bedeuten Spalten im Bootstrap müssen wir nur zu "span6" wechseln. Also unsere Tables Initialisierung wie folgt aussieht:

$(document).ready(function() { 
    $('#example').dataTable({ 
     "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>" 
    }); 
}); 

Wir müssen auch eine neue Klasse setzen auf den Tables Hüllenelement, um die Formularelemente erscheinen inline und nicht als Block (die Tabelle Filterung Eingang und Länge Wähler zu machen sind . durch diese bewirkt dies zu tun, erweitern wir einfach die „sWrapper“ Klasse Option für die Datatable:

$.extend($.fn.dataTableExt.oStdClasses, { 
    "sWrapper": "dataTables_wrapper form-inline" 
}); 

Sortierung Bootstrap v2 abgesunken Unterstützung für Tablesorter als Tabellenbibliothek und als Ergebnis haben die Sortierklassen entfernt worden Als solche müssen wir unser eigenes Sortier-Styling definieren, was wir genau in den s tun können ame Art und Weise, wie tun wir in Tables eigenen CSS-Dateien (die Bilder in der Tables Verteilung Zip-Datei in Medien/Bilder verfügbar sind):

table.table thead .sorting, 
table.table thead .sorting_asc, 
table.table thead .sorting_desc, 
table.table thead .sorting_asc_disabled, 
table.table thead .sorting_desc_disabled { 
    cursor: pointer; 
    *cursor: hand; 
} 

table.table thead .sorting { background: url('images/sort_both.png') no-repeat center right; } 
table.table thead .sorting_asc { background: url('images/sort_asc.png') no-repeat center right; } 
table.table thead .sorting_desc { background: url('images/sort_desc.png') no-repeat center right; } 

table.table thead .sorting_asc_disabled { background: url('images/sort_asc_disabled.png') no-repeat center right; } 
table.table thead .sorting_desc_disabled { background: url('images/sort_desc_disabled.png') no-repeat center right; } 

Aufräumen Schließlich gibt es zwei Änderungen an meine Integration CSS vom 1.4 Datei unser Styling komplett:

entfernen Sie die Breite von den dataTables_length und dataTables_filter Klassen. Die Updates in Bootstrap bedeuten, dass diese nicht mehr benötigt werden. Die Tabellenklasse, die ich vorher hatte, hatte "margin: 1em 0;" aber mit den Änderungen ist der visuelle Fluss jetzt besser mit "Rand-unten: 6px! wichtig;"

prüfen this Referenz

Answer 2

Es gibt eine library, die die Fähigkeit des Sortierens mit Bootstrap-Tabellen zur Verfügung stellt.

Hier ist ein quick demonstration, wie man es benutzt.

HTML:

<table class="table table-bordered table-striped sortable"> 
    <thead> 
     <tr> 
     <th data-defaultsign="month" data-sortcolumn="1" data-sortkey="1-1"> 
     Date 
     </th> 
     </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td data-dateformat="D-M-YYYY">16.4.2004</td> 
    </tr> 
    <tr> 
     <td data-dateformat="D-M-YYYY">6.7.2002</td> 
    </tr> 
    <tr> 
     <td data-dateformat="D-M-YYYY">4.4.2004</td> 
    </tr> 
    <tr> 
     <td data-dateformat="D-M-YYYY">6.6.2012</td> 
    </tr> 
    </tbody> 
</table> 

JS:

(function() { 
    var $table = $('table'); 
    $table.on('sorted', function() { 
     console.log("Table was sorted."); 
    }); 
}()); 

HTH.