Jak sprawić, aby stół mógł sortować przy pomocy Twitter Bootstrap?

Question

Chcę wiedzieć, w jaki sposób mogę przygotować mój stół do sortowania za pomocą Twitter Bootstrap? Jakie rzeczy należy wziąć pod uwagę?

Answer 1

Musisz użyć jQuery i dataTable.js.

Pozwala zobaczyć przykład: Siatka

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

wyświetlania: zdefiniować układ siatki dla elementów sterujących DataTables, wcześniej mieliśmy używane „span8” elementy do oznaczenia pół elementy szerokości, ale ze zmianą do 12 kolumny w Bootstrapie wystarczy zmienić na "span6". Więc nasz DataTables inicjalizacji wygląda następująco:

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

Musimy również ustawić nową klasę na DataTables otoki elementu, tak aby elementy tworzą pojawiają inline zamiast jako blok (tabela filtrowanie wejścia i selektor długości są . dokonane przez tę Aby to zrobić, po prostu przedłużyć „sWrapper opcję” klasa dla DataTable:

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

sortowanie Bootstrap v2 spadło poparcie dla tablesorter jako biblioteka tabeli, w wyniku zajęcia sortowania zostały usunięte Jako takie musimy zdefiniować naszą własną stylistykę, którą możemy wykonać dokładnie w ten sam sposób ame sposób jak my we własnych plików CSS DataTables' (obrazy są dostępne w pliku zip dystrybucji DataTables w media/images):

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; } 

Posprzątać Wreszcie istnieją dwie modyfikacje moim integracji CSS od 1,4 plik do uzupełnienia naszej stylizacji:

Usuń szerokość z klas dataTables_length i dataTables_filter. Aktualizacje w Bootstrap oznaczają, że nie są już potrzebne. Klasa tabeli, którą miałem wcześniej, miała "margin: 1em 0;" ale bez zmian, wizualny przepływ jest teraz lepszy dzięki "margin-bottom: 6px! important;"

Sprawdź this odniesienia

Answer 2

Jest library że zapewnia możliwość sortowania ze stołami startowej.

Oto quick demonstration, jak z niego korzystać.

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.