DataTables – stwórzmy bazę klientów

Zobacz jak łatwo wyświetlić dane używając wtyczki do jQuery –
DataTables.

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

Treść:




Wymagania

Potrzebne są tylko jQuery oraz pliki wtyczki DataTables.
Można zainstalować je 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

Inicjalizacja pierwszej tabelki.

Wystarczy tabelka html z klasą .display jak tym przykładzie:

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

Do zainicjalizowania pierwszej tabeli, po załadowaniu DOM,
użyjemy na niej funkcji DataTable().

Dane naszych klientów, do tabelki załadujemy z pliku .txt  JSON,
poprzez wbudowaną do wtyczki opcje ajax, o tak:

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

Dodatkowe opcje DataTables

DataTables daje wiele łatwych w implementacji, wbudowanych opcji. Jedną z nich jest ta użyta wcześniej – „ajax”, a w następnych częściach poradnika pojawi się ich więcej.

pageLength, lengthMenu

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

Drugiej 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

$('#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]}
 ]
});


A.

Dodaj komentarz