DataTables – stwórzmy 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 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

Inicjalizacja pierwszej tabelki.

Na początek wystarczy tabelka 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>

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

Dane naszych klientów, do dostarczymy z pliku .txt w formacie JSON,
poprzez wbudowaną do wtyczki opcje ajax:

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

Dodatkowe opcje DataTables

DataTables udostępnia nam możliwość zmiany wielu opcji. Jedną z nich jest ta użyta wcześniej – „ajax”.

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