Tworzenie rozbudowanych paneli administracyjnych lub stron internetowych ze szczegółowymi i obszernymi statystykami może być sporym wyzwaniem dla deweloperów. Ciekawym problemem jest utrzymanie odpowiedniej funkcjonalności tabel HTML, które prezentują obszerne zestawy danych w wielu kolumnach.

W tym artykule skupimy się na front-endzie skalowalnych tabel HTML, w którym wykorzystamy bardzo popularną i rozbudowaną wtyczkę jQuery o nazwie DataTables.js. Jeżeli do tej pory ręcznie wykonywałeś takie mechanizmy jak:

  • paginację tabel,
  • sortowanie po kolumnach,
  • wyszukiwarkę fraz w komórkach,
  • eksport danych tabelarycznych do formatów: CSV, PDF, XLSX,

to będziesz mocno zaskoczony jak DataTables.js ułatwia i przyspiesza tworzenie aplikacji i stron, które mają dostarczać takich danych. Skrypt ten robi praktycznie wszystko za nas.

Jeżeli do tej pory – tak jak ja – obsługiwałeś paginację tabel lub wyszukiwarkę po stronie back-endu to tym bardziej powinieneś się zainteresować rozwiązaniem, które już spieszę zaprezentować.

Tabele HTML są proste… prawda?

Tabele HTML to bardzo podstawowy element stron HTML. Służą one do prezentowania danych tabelarycznych. Jeżeli mamy serię danych z kolumnami to naturalnie zaprezentujemy je w tabeli. Wszelkie dane statystyczne, rankingi, historie, bazy danych powinniśmy umieszczać w tabelach HTML.

Problem powstaje wtedy, kiedy tych danych jest stosunkowo dużo. Prezentacja tabeli składającej się z 500 wierszy nie sprawi problemu przeglądarce natomiast może być mniej wygodna dla użytkownika. Pierwszym problemem do rozwiązania będzie paginacja.

Wyświetlenie tabeli już z kilkoma tysiącami wierszów może być sporym wyzwaniem dla przeglądarek – tym bardziej mobilnych. Jak wiemy tabela składa się z serii zagnieżdżonych elementów <tr> i <td>. Wiele rekordów może doprowadzać do problemów wydajnościowych. Drzewo DOM staje się w pewnym momencie zbyt złożone, wraz z drobnymi efektami CSS zwykłe przewijanie po takiej stronie może zwyczajnie się zacinać.

Drugim problemem jest sortowanie. W tabelach umieszczonych na stronie – gdzie dane same z siebie są jednoznacznie zorganizowane aż się prosi aby móc je sortować. Przeglądarki nie mają natywnej funkcjonalności zapewniania sortowania i trzeba to zrobić na własną rękę.

Kiedy już mamy tę tabelę z danymi, to czy nie jest tak, że często istnieje potrzeba wyszukania danej komórki?

Tabele często są podstawą tworzenia artykułów i prac naukowych. Kopiowanie danych z tabel może być problematyczne. Tym bardziej, jeżeli nie dysponujemy odpowiednimi narzędziami.

Eksport danych tabelarycznych do formatów PDF czy XLSX może być przydatny w rozbudowanych panelach administracyjnych lub kontach użytkownika. Tworzenie zestawień które można łatwo załączyć do e-maila może zaoszczędzić wiele powtarzalnej pracy użytkownikom, pracownikom lub administratorowi.

Oczywiście, wszystkie funkcjonalności można oprogramować samemu zarówno w back-endzie aplikacji jak i na front-endzie.

Instalacja DataTables.js

Wtyczka DataTables.js rozwiązuje wszystkie wymienione problemy. Dodając zewnętrzny plug-in jQuery i inicjalizując wtyczkę możemy mieć wszystkie te funkcjonalności w kilka chwil.

Najlepszą instrukcją instalacji wtyczki będzie pokazanie w kilku krokach jak dodaję wspomniane funkcjonalności do obecnej aplikacji, która prezentuje wiele tabel.

Wymagania

Pamiętajmy, że DataTables.js wymaga biblioteki jQuery. Po dołączeniu biblioteki możemy umieścić właściwy skrypt.

Kolejnym warunkiem jaki musi spełnić nasz kod są poprawne syntaktycznie tabele z elementami thead, tbody oraz opcjonalnie tfooter. 

<table id="table_id" class="display">
   <thead>
      <tr>
         <th>Kolumna 1</th>
         <th>Kolumna 2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Wiersz 1 Komórka 1</td>
         <td>Wiersz 1 Komórka 2</td>
      </tr>
      <tr>
         <td>Wiersz 2 Komórka 1</td>
         <td>Wiersz 2 Komórka 2</td>
      </tr>
   </tbody>
</table>

Dodanie skryptu i stylu DataTables

Dodajmy teraz pliki z CDN. W celu personalizacji wtyczki można zbudować własną kompilację za pomocą kreatora: https://datatables.net/download/

W nagłówku dodaję styl:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">

A w stopce link do wtyczki:

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

Oczywiście, pliki można też pobrać, za pomocą podlinkowanego wcześniej kreatora zbudować własną paczkę i załadować lokalnie.

Teraz przyszedł czas na inicjalizację:

<script>
   $(document).ready( function () {
      $('#tabela').DataTable();
   });
</script>

Tabeli nadajemy atrybut o dowolnej nazwie np. id=”tabela” i dodajemy powyższy skrypt. Po wszystkim, do strony powinna dojść paginacja, wyszukiwarka słów oraz selektor, który pozwala wybrać ilość widocznych wyników.

Niestety, wszystkie napisy są w języku angielskim. Czy można to jakoś łątwo przetłumaczyć?

DataTables.js wspiera wielojęzyczność

Można, i jest na to prosty sposób. W miejscu gdzie inicjalizowaliśmy tabelę wystarczy dodać parametr i dodać odwołanie do dodatkowego pliku, z tłumaczeniami. Całość powinna wyglądać tak:

<script>
   $(document).ready( function () {
      $('#tabela').DataTable({
         "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Polish.json"
         }
      });
   });
</script>

Efekt końcowy

Jak widać wszystko działa jak należy:

Przykład tabeli wygenerowanej przy udziale DataTabels.js

Kiedy klikam na nagłówki typu „Imię i nazwisko” lub „Data” tabela natychmiast sortuje dane. Za pomocą selektora „Pokaż” mogę wybrać czy chcę widzieć 10, 50 czy 100 rekordów na raz. Wyszukiwarka filtruje dane w momencie naciśnięcia klawisza z dodatkową literą. Paginacja równo z klikiem myszki przenosi nas do odpowiedniej podstrony tabeli. Na samym dole jest podsumowanie z sumą rekordów.

Wszystkie te elementy zostały automatycznie dodane do DOM i nie dokonywałem żadnych dodatkowych zmian w kodzie, których w tym artykule nie opisałem. Dodatkowe elementy można sobie teraz ostylować według własnego upodobania. Zapoznaj się ze szczegółami na oficjalnej stronie wtyczki i zobacz jakie inne i ciekawe funkcjonalności związane z tabelami możesz wykorzystać w ramach opisywanego rozszerzenia.

Podsumowanie

Ile zaoszczędziłem czasu? – mnóstwo. Ile klient zaoszczędził dzięki mnie pieniędzy? – drugie tyle. Dodatkowo, rozwiązanie takie mogę powielać bez końca w innych komercyjnych projektach, bo DataTables.js jest w pełni darmowe i rozpowszechniane na licencji MIT.

Źródła:

https://datatables.net/manual/installation

Oceń artykuł na temat: DataTables.js – paginacja i sortowanie tabel HTML
Średnia : 4.8 , Maksymalnie : 5 , Głosów : 9