How to Add Sort, Pagination and Search Filter in HTML Tables
The use of HTML tables is a common way of displaying data in an organized and user-friendly manner on a webpage.
However, as the amount of data increases, it becomes difficult to find the specific information you want on the table. It thus becomes necessary to add additional functionalities to the table such as sorting, pagination, and search filters to enhance the user experience.
These features allow users to easily navigate and find the information they need.
You most probably have come across a table such as the one below on a webpage:
| Name | Age | Country | |
|---|---|---|---|
| John Doe | johndoe@email.com | 30 | Kenya |
| Abby Sharma | abby@domain.com | 25 | India |
| James Bond | jammie@abc.com | 32 | United States |
| Morgana Pendragon | m.pendragon@email.com | 27 | Germany |
This table has three main important features for a better user experience which include sorting, pagination, and search filter.
- Sorting: This refers to arranging the table entries in a specific order based on a chosen criterion, such as alphabetical order, numerical order, or date order. It enables users to organize the data by clicking on column headers. It is particularly useful when dealing with large datasets that may be difficult to navigate otherwise
- Pagination: It involves dividing large sets of data into smaller, more manageable sections referred to as pages. This allows you to display a limited number of rows per page, with navigation links, such as "Previous", "Next", and page numbers allowing users to easily navigate between pages.
- Search Filter: A search filter enables users to quickly search for specific data within an HTML table by entering relevant keywords or phrases without having to manually scan through the entire table. The table usually has an input field at the top, where users can type their search query, and the table will dynamically update to display only the matching rows.
If you are wondering how you can implement such tables on your web pages, then this article is for you.
There exist several plugins that enable the implementation of sorting, pagination, and search filter functionalities in HTML tables. In this article, we will cover DataTables which is among the most popular.
DataTables Plugin
DataTables is a powerful and popular jQuery plugin for adding advanced interactive features that enhance the accessibility of data in HTML tables.
It is highly flexible and enables users to obtain useful information from the table as quickly as possible through ordering, searching, and paging.
To install and use DataTables in your HTML tables, you need to include two files on your page:
- The DataTables Javascript file
- The DataTables CSS file
You can include these files directly from the DataTables CDN.
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
Alternatively, if you prefer not to use a CDN, you can download and use the files locally in your project.
<link rel="stylesheet" href="path/to/file/datatables.css">
<script src="path/to/file/datatables.js"></script>
Being a jQuery plugin, DataTables relies upon using jQuery in your pages in order to work. jQuery v1.7 or newer will work with DataTables. However, it is recommended to use the latest jQuery version.
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
Make sure your table is valid, has well-formatted HTML, and with a header (<thead>) tag and a single body (<tbody>) tag.
Example
<table id="userTable" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>johndoe@email.com</td>
<td>30</td>
<td>Kenya</td>
</tr>
<tr>
<td>Abby Sharma</td>
<td>abby@domain.com</td>
<td>25</td>
<td>India</td>
</tr>
<tr>
<td>James Bond</td>
<td>jammie@abc.com</td>
<td>32</td>
<td>United States</td>
</tr>
<tr>
<td>Morgana Pendragon</td>
<td>m.pendragon@email.com</td>
<td>27</td>
<td>Germany</td>
</tr>
</tbody>
</table>
Initialising DataTables
After creating the HTML table and including the necessary dependencies, the last step is to initialize the DataTables plugin. Below is how you do it in jQuery.
$(document).ready(function() {
$('#userTable').DataTable();
});
Note that 'userTable' in our initialization above is the table's ID attribute value. You can replace it with your table's ID value or even its class name.
That's it! DataTables will automatically add sorting, pagination, and search functionality to your table, making it easy and quick to find the information.
Below is a fully working code for a page with DataTables.
<!DOCTYPE html>
<html>
<head>
<title>DataTables Example</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<style>
section{
width: 70%;
margin: 30px auto;
}
#userTable th, #userTable td{
border: 1px solid #ccc;
text-align: left;
}
#userTable thead {
background: #f2f2f2;
}
</style>
</head>
<body>
<section>
<table id="userTable" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>johndoe@email.com</td>
<td>30</td>
<td>Kenya</td>
</tr>
<tr>
<td>Abby Sharma</td>
<td>abby@domain.com</td>
<td>25</td>
<td>India</td>
</tr>
<tr>
<td>James Bond</td>
<td>jammie@abc.com</td>
<td>32</td>
<td>United States</td>
</tr>
<tr>
<td>Morgana Pendragon</td>
<td>m.pendragon@email.com</td>
<td>27</td>
<td>Germany</td>
</tr>
</tbody>
</table>
</section>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#userTable').DataTable();
});
</script>
</body>
</html>
Implementing DataTables in Bootstrap
If you're using Bootstrap, DataTables can be integrated seamlessly. The implementation is typically the same as in the pure HTML implementation above, only that in this case the JS and CSS source files are different. In this case, you need to include one CSS file and two JS files.
Include the appropriate source files based on your project's Bootstrap version.
Bootstrap 5
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
Bootstrap 4
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>
Bootstrap 3
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap.min.js"></script>
You can as well download the source files and host them locally in your project.
Everything else, such as creating the HTML table and initializing DataTables is the same as described above for the integration in pure HTML.
Below is a fully working example for the implementation of DataTables in Bootstrap.
<!DOCTYPE html>
<html>
<head>
<title>DataTables Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
<style>
section {
margin-top: 30px;
}
</style>
</head>
<body>
<section>
<div class="offset-md-2 col-md-8">
<table class="table table-bordered table-striped" id="userTable" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>johndoe@email.com</td>
<td>30</td>
<td>Kenya</td>
</tr>
<tr>
<td>Abby Sharma</td>
<td>abby@domain.com</td>
<td>25</td>
<td>India</td>
</tr>
<tr>
<td>James Bond</td>
<td>jammie@abc.com</td>
<td>32</td>
<td>United States</td>
</tr>
<tr>
<td>Morgana Pendragon</td>
<td>m.pendragon@email.com</td>
<td>27</td>
<td>Germany</td>
</tr>
</tbody>
</table>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<script>
$(document).ready(function() {
$('#userTable').DataTable();
});
</script>
</body>
</html>
Above is what the table from the code looks like. You can copy the code and customize it as you wish to fit your needs.
How to Prevent Reordering of Rows by DataTables
As you may have noticed, in our HTML table code, "John Doe" is the first entry followed by "Abby Sharma" and so on. But when DataTables is initialized and the table displayed on the page, the order is reorganized, and "John Doe" becomes the third entry.
This happens because DataTables by default uses the first letter or number of the first column data to order entries alphabetically or numerically.
If you you want to override this default DataTables behavior and have the entries displayed in the order in which they appear in the code, you can simply change that in the DataTables initialization line as below.
$(document).ready(function() {
$('#userTable').DataTable({"aaSorting": []});
});
Conclusion
Incorporating sorting, pagination, and search filter functionalities in HTML tables greatly enhances the user experience and improves data presentation. By allowing users to interact with large datasets more efficiently, these features simplify data analysis, reduce clutter, and enhance overall performance.
Plugins like DataTables provide an easy and flexible way to implement these functionalities, both in pure HTML and in popular frameworks such as Bootstrap.
In this article, we have covered how to implement the DataTables plugin in your web pages for easier accessibility of data on HTML tables.
