While fetching data from the database we use tables to display the data to users. Most of the time the data may be long, that is, from 100 entries and above.
Displaying such kind of data on a single page makes the page to be long and one has to scroll downwards to get to the bottom of the page. This is unprofessional and at the same time tedious.
Also, it makes the page load slowly, therefore, making the user experience to be poor. There is a solution to this problem that uses data tables.
What are datatables?
Datatables by definition is a powerful jQuery plugin for creating, displaying information in tables, and adding interactions to them. It provides searching, sorting, and pagination without any configuration.
Datatables allows you to display your data in an easy way without thinking of how to style them also it gives you options of how many rows you want to show and also it has an inbuilt search tool that sorts and filters data depending on how you want.
Being a plugin means that everything is done for you as a website developer so what you need to do is just include the data tables links and follow its structure to display data. The features present in data tables are;
- Pagination – it has options for Previous, next, and page navigation
- Instant search – no need to click the search button
- Multi-column ordering – you can sort data by multiple columns at once.
- Use almost any data source – supports multiple data sources not limited to DOM, Javascript, Ajax, and server-side processing.
- Wide variety of extensions – it is not limited to few features, that is, you can add Editor and Buttons
- Mobile friendly - Tables adapt to the viewport size
- Free open-source software
In this article, we shall highlight what is required to have data tables work in your website and also display data using data tables.
How to add datatables in a webpage
Follow the following steps to include datatables in your website
- You will need to have a table with data like shown below
<table id="table_id">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>row1data1</td>
<td> row1data2</td>
<td> row1data3</td>
</tr>
<tr>
<td> row2data1</td>
<td> row2data2</td>
<td> row2data3</td>
</tr>
<tr>
<td> row3data1</td>
<td> row3data2</td>
<td> row3data3</td>
</tr>
</tbody>
</table>
- Next you will need to include the datatables css and js files in the head section of your website. The files are available in official datatables website https://datatables.net/
<head>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
</head>
- Next you will now need to join your table id with the datatables code snippet
<script>
$(document).ready( function () {
$('#table_id).DataTable();
} );
</script>
The full code will be like shown below
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://www.solutionspacenet.com/assets/vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
</head>
<body>
<table class="table table-bordered" id="table_id">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>row1data1</td>
<td> row1data2</td>
<td> row1data3</td>
</tr>
<tr>
<td> row2data1</td>
<td> row2data2</td>
<td> row2data3</td>
</tr>
<tr>
<td> row3data1</td>
<td> row3data2</td>
<td> row3data3</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://www.solutionspacenet.com/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
$('#table_id).DataTable();
} );
</script>
</body>
</html>
Having followed the above steps, you will have added data tables to your website and when you save your file and run, you will see your table with added features provided in the jquery data table plugin.
