DataTables tutorial – stwórzmy pierwszą bazę klientów

Zobacz w jaki sposób wyświetlić dane używając wtyczki do jQuery –
DataTables.

W tym przykładzie źródłem danych będzie JSON.

Treść:

Wymagania

Potrzebne są jedynie jQuery, podstawowa znajomość tej biblioteki oraz wtyczka DataTables.
Można zainstalować ją używając: NPM, Bower lub załączyć do html podając ścieżke CDN bądź tę do wcześniej ściągniętych na serwer plików.

W tym projekcie używam również Bootstrap.

<!--jQuery-->
//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

<!--DataTables-->
//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css

<!--Bootstrap-->
//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css
//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js

Co to jest DataTables

Jak możemy przeczytać na oficjalnej stronie, jest to wtyczka do biblioteki JavaScript jQuery, będąca bardzo elastycznym narzędziem opartym na podstawach progresywnego ulepszania, które dodaje wszystkie te zaawansowane funkcje do dowolnej tabeli HTML.

DataTables może pobierać dane, które ma wyświetlać, z wielu różnych źródeł. Oznacza to, że nie jesteś ograniczony/a do podawania danych w określony sposób, a wtyczka zapewnia dużą elastyczność.

Inicjalizacja pierwszej tabelki

Pierwsza inicjalizacja datatables jest procesem wyjątkowo prostym – wystarczy tabela html z klasą .display:

<table id="example" class="table table-bordered text-center display" style="width:100%">
 <thead>
  <tr>
   <th>Name</th>
   <th>Project</th>
   <th>Location</th>
   <th>Code</th>
   <th>Deadline</th>
   <th>Salary</th>
  </tr>
 </thead>
</table>

Po załadowaniu DOM, na powyższej tabelce użyjemy funkcji DataTable()

Do datatables dane naszych klientów zaimportujemy z pliku .txt w formacie JSON, wykorzystując do tego wbudowaną we wtyczkę opcje ajax:

$(document).ready( function () {
 $('#example').DataTable({
  "ajax": 'arrays.txt'
  });
});

Dodatkowa konfiguracja DataTables

DataTables udostępnia nam możliwość zmiany wielu opcji naszej tabelki. Jedną z nich jest np. ta użyta wcześniej – „ajax”, dizięki której skonfigurowaliśmy źródło importu danych. W podobny sposób wpływać możemy na inne ustawienia tabeli.

Niektóre z parametrów dostepnych do uzycia:

pageLength, lengthMenu

Pierwszy parametr, umożliwia nam wskazanie liczby wyświetlanych w tabeli wierszy.

Drugiej opcji używamy, aby zdefiniować, to jaką ilość wierszy może wyświetlić użytkownik oraz to, jak jest to wyświetlane.

"pageLength": 5,
"lengthMenu": [[5,10,25,50,-1],[5,10,25,50, "All"]]

columnDefs

Ten parametr pozwala przypisać określone opcje do kolumn w tabeli –
za jej pomocą dodamy klasę .hidden, by ukryć dwie z nich.

.hidden{
	display: none;
}
 "columnDefs": [
  { className: "hidden", "targets": [3,5]}
 ]

Cała tabela

A oto kod delikatnie skonfigurowanej tabelki:

$('#example').DataTable( {
 "ajax": 'arrays.txt',
 "select": {style:'single'},
 "pageLength": 5,
 "lengthMenu": [[5,10,25,50,-1],[5,10,25,50, "All"]],
 "columnDefs": [
  { className: "hidden", "targets": [3,5]}
 ]
});

W następnej części tutoriala dodamy obsługuję Dom event, takich jak kliknięcie w rekord na tabeli lub późniejsze edytowanie go.



Adam.

Dodaj komentarz