I used the Datatables jQuery plug-in extensively in a work project. It is pretty easy to implement and offers useful functionality: search, pagination and ordering by column. This is the same as the Datatables plugin I use on this WordPress site.
Required knowledge:
1. Demo
Here is a link to the Datatables demo page
2. Code
Below is the code for the demo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Datatables demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
<link href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css" rel="stylesheet">
<link href="https://cdn.datatables.net/2.0.8/css/dataTables.jqueryui.min.css" rel="stylesheet">
</head>
<body>
<h1>DataTables Demo</h1>
<p>This is a simple implmentation of the DataTables library.</p>
<p>It is critical that your HTML table syntax is correct.</p>
<table id="myTable" class="display">
<thead>
<tr>
<th>Album ID</th>
<td>Album Name</th>
<th>Album Artist</th>
<th>Album Format</th>
<th>Album Genre</th>
<th>Album Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>101</td>
<td>Depeche Mode</td>
<td>2LP</td>
<td>Synth-Pop</td>
<td>1989</td>
</tr>
<tr>
<td>2</td>
<td>"Give Us A Wink!"</td>
<td>Sweet</td>
<td>LP</td>
<td>Rock</td>
<td>1976</td>
</tr>
<tr>
<td>3</td>
<td>(b)efore / (a)fter Remixes</td>
<td>dZihan & Kamien</td>
<td>12S</td>
<td>Deep House</td>
<td>2000</td>
</tr>
<tr>
<td>4</td>
<td>(I Just Gotta) Runaway</td>
<td>D-Syne</td>
<td>12S</td>
<td>UK Garage</td>
<td>1998</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#myTable').DataTable();
});
</script>
</body>
</html>
References:
- DataTables. (no date) Add advanced interaction controls to your HTML tables the free & easy way. Available at: https://datatables.net/ (Accessed: 19 June 2024).