jQuery DataTables
Co to je
jQuery DataTables je plugin pro jQuery, který přidává pokročilé integrační funkce pro HTML tabulky.
Umožňuje rychle a snadno implementovat funkce jako je stránkování, řazení, vyhledávání a filtrování dat v tabulkách.
Podporuje načítání dat dynamicky (AJAX), což umožňuje tabulkám pracovat s velkými objemy dat bez nutnosti načítat celou stránku.
Zdroj obrázku: https://miro.medium.com/v2/resize:fit:1024/1*kwlw0Y8ZYd3-YbW0WuFR7w.png
Integrace
Pro integraci potřebujeme integrovat jQuery, příp. Bootstrap, a samotné DataTables CSS a JS.
Buď si můžete stáhnout k sobě nebo použít oficiálních CDN https://datatables.net/download/
Případně použít naše CDN (viz kód níže):
<!-- jQuery -->
<script src="https://cdn.mesosdev.cz/jquery/jquery-3.7.1.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.mesosdev.cz/bootstrap/bootstrap-5.3.min.css">
<!-- DataTables CSS a JS -->
<link rel="stylesheet" type="text/css" href="https://cdn.mesosdev.cz/datatables/datatables.min.css">
<script src="https://cdn.mesosdev.cz/datatables/datatables.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.mesosdev.cz/bootstrap/bootstrap-5.3.min.js"></script>
Načtení s tabulkou
Pro načtení stačí použít pod tabulkou pomocí jQuery načíst funkci DataTable(), kdy element je název tabulky.
$('#produkty').DataTable();
Celý kód:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataTables 1</title>
<!-- jQuery -->
<script src="https://cdn.mesosdev.cz/jquery/jquery-3.7.1.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.mesosdev.cz/bootstrap/bootstrap-5.3.min.css">
<!-- DataTables CSS a JS -->
<link rel="stylesheet" type="text/css" href="https://cdn.mesosdev.cz/datatables/datatables.min.css">
<script src="https://cdn.mesosdev.cz/datatables/datatables.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.mesosdev.cz/bootstrap/bootstrap-5.3.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Apple produkty</h2>
<table id="produkty" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Produkt</th>
<th>Kategorie</th>
<th>Rok uvedení</th>
<th>Cena</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone 15 Pro Max</td>
<td>Smartphone</td>
<td>2023</td>
<td>36990</td>
</tr>
<tr>
<td>iPad Pro</td>
<td>Tablet</td>
<td>2021</td>
<td>16990</td>
</tr>
<tr>
<td>MacBook Air</td>
<td>Laptop</td>
<td>2022</td>
<td>21990</td>
</tr>
<tr>
<td>Apple Watch Series 9</td>
<td>Smartwatch</td>
<td>2021</td>
<td>11490</td>
</tr>
<tr>
<td>AirPods Pro 2.gen</td>
<td>Sluchátka</td>
<td>2022</td>
<td>6790</td>
</tr>
</tbody>
</table>
</div>
<script>
$('#produkty').DataTable();
</script>
</body>
</html>
Interaktivní ukázka:
Překlad (Čeština)
Jistě jste si všimli, že různé popisky jsou v anglickém jazyce.
Jazyk můžeme nastavit pomocí konfigurace vlastnosti language, v naší inicializační funkci.
V konfiguračním objektu nastavíme jazykové preference pomocí klíče language. Toto je objekt, který obsahuje různé jazykové možnosti, které DataTables používá k zobrazení různých textů UI.
$('#produkty').DataTable(
{
"language": {
"search": "Hledat:",
"zeroRecords": "Nic nebylo nalezeno"
}
}
);
Úplně nejjednodušší je však použít již hotové řešení přímo od přispěvatelů DataTables, a to integrovat externí json v tomto klíči s mapou překladu.
Tato mapa je zveřejněna na naší CDN: https://cdn.mesosdev.cz/datatables/cs.json
$('#produkty').DataTable(
{
"language": {
url: '//cdn.mesosdev.cz/datatables/cs.json'
}
}
);