Chcę wiedzieć, w jaki sposób mogę przygotować mój stół do sortowania za pomocą Twitter Bootstrap? Jakie rzeczy należy wziąć pod uwagę?Jak sprawić, aby stół mógł sortować przy pomocy Twitter Bootstrap?
Odpowiedz
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
DataTables nie jest już bezpłatny.Odpowiedź @ KindSyco to darmowy sposób na zrobienie tego samego przy użyciu Bootstrap i jest wtyczką Bootstrap, więc łatwiej się zintegruje. Imho – akousmata
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.
działa idealnie i czysto ... –
@Kremena Szczęśliwy, że pomógł komuś! – KindSyco
- 1. Jak budować Twitter Bootstrap
- 2. Twitter Bootstrap: Funkcja bezczynności przy braku dopasowań
- 3. Jak zaimplementować twitter bootstrap accordion?
- 4. Twitter Bootstrap: Pobierz przyciski wyboru stanu bootstrap
- 5. Bootstrap stół żadna nowa linia
- 6. Twitter Bootstrap Carousel Not Sliding
- 7. Twitter Bootstrap: zagnieżdżone wiersze?
- 8. Jak zmienić barwę bootstrap (twitter) pasek postępu przy starcie
- 9. twitter bootstrap - jak pominąć linię?
- 10. Używanie Twitter Bootstrap iFrame?
- 11. Twitter Bootstrap sideway caret
- 12. Twitter bootstrap split dropdown
- 13. Twitter Bootstrap daszka rozmiar
- 14. karuzela bootstrap twitter znika
- 15. jak złamać długie słowo w Span? (Przy użyciu Twitter Bootstrap)
- 16. Twitter-bootstrap stół jak dostać się tylko zewnętrzne linie graniczne, a nie między rzędami
- 17. Twitter Bootstrap Poziomy formularz
- 18. Twitter Bootstrap i Google Maps
- 19. Twitter Bootstrap "ciecz-pojemnik"
- 20. Twitter Bootstrap obejmuje przelewał
- 21. 100% szerokość Twitter Bootstrap 3 szablon
- 22. Twitter Bootstrap rtl rating gwiazdek
- 23. dynamiczny karuzela twitter bootstrap
- 24. jqGrid na Twitter Bootstrap
- 25. twitter bootstrap domyślne wyściełanie
- 26. Clearfix z twitter bootstrap
- 27. Twitter bootstrap karta akordeonowa
- 28. Wyświetl HTML w @ html.actionlink z Twitter Bootstrap
- 29. Twitter Bootstrap Wybór rodzaju głowicy
- 30. Ember.js z Twitter Bootstrap Modal
użyć wtyczki sortownika tabeli –
Już używam tego [wtyczki] (http://datatables.net/blog/Twitter_Bootstrap_2) Skopiowałem css, js i etc i nie wiem dlaczego nie działa ~ _ ~ –
sprawdź konsolę dla błędu. naciśnij klawisz f12 -> konsola –