
Good content takes time and effort to come up with.
Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.
In this article let's add superpowers to your HTML Table. With a regular table you won't be able to add Searching, Sorting & Pagination, Limiting Records Per Page, Exporting data in various formats, and much more.
But with the help of DataTable, we can implement with the breeze.
We will be covering the following in this article
Note: Code available in GitHub @ Client-Side DataTable
I will use CDN (Content Delivery Network) instead of downloading and placing them in my HTML file. But if would like to work offline then please go ahead and use the URLs to download the content and save them with respective file names.
CDN / Download URL - jQuery CDN
CDN / Download URL - DataTable CDN
CDN / Download URL - DataTable CSS
That's it 3 files.
Once we use the above files in our HTML file then it will look like the following
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DataTable Demo</title>
<!-- DataTable CSS File -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
</head>
<body>
<!-- jQuery File -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- jQuery DataTable Javascript File -->
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
</body>
</html>
You can even download the assets using CDN URLs by downloading them and adding its path in your HTML file.
NOTE: Make sure to addthead
andtbody
tags for tables else datatable won't work
Basically we will have our HTML Table as follows. Observe thead, tbody, tfoot
tags
<table id="datatable" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
Don't forget to add id="datatable" in <table>, you can name as per your convenience. You can even use the class name here.
Using this id="datatable"
we will initialize DataTable later.
The following is the code which tells that when the document loads grab the table which has id="datatable"
and apply DataTable()
feature to it
<script>
$(document).ready(function() {
$('#datatable').DataTable();
});
</script>
That's it very simple right?
Your basic full implementation demo will be as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DataTable Demo</title>
<!-- DataTable CSS File -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
</head>
<body>
<table id="datatable" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<!-- jQuery File -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- jQuery DataTable Javascript File -->
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#datatable').DataTable();
});
</script>
</body>
</html>
You can easily disable the features you don't need with DataTable very easily with the following settings
$(document).ready(function() {
$('#datatable').DataTable({
"paging": false, /** Disables Pagination Feature */
"ordering": false, /** Disables Ordering Feature */
"searching": false, /** Disables Searching Feature */
});
});
"paging": false
- Disables the pagination and shows all the rows without any pagination
"ordering": false
- Disables the ordering of the table
"searching": false
- Disables the searching option
lengthMenu
)You can customize menu length with any number of fields options you would like to with the following addition in your datatable configuration
$(document).ready(function() {
$('#datatable').DataTable({
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ]
});
});
pageLength
)By default 10 rows will be displayed per page, but you can change this as per your needs with pageLength
feature.
$(document).ready(function() {
$('#datatable').DataTable({
"pageLenght": 5
});
});
Make sure to change the lengthMenu
values if you're using along with this as follows, else you will see blank in lengthMenu option.
$(document).ready(function() {
$('#datatable').DataTable({
"lengthMenu": [ [5, 10, 25, 50, -1], [5, 10, 25, 50, "All"] ],
"pageLength": 5
});
});
Earlier in lengthMenu
we had not added 5
NOTE: By default this feature is enabled, it will order in ascending for the first column in default mode
You can enable or disable your column with the help of the following option in datatable
$(document).ready(function() {
$('#datatable').DataTable({
"order": false /** By default enabled */
});
});
As I said earlier the order feature will order in ascending for the first column in default mode. But we can change the ordering for multiple columns with the following code. The ordering of any column starts with Zero (0)
$(document).ready(function() {
$('#datatable').DataTable({
"lengthMenu": [ [5, 10, 25, 50, -1], [5, 10, 25, 50, "All"] ],
"pageLength": 5,
"order" : [[0, 'asc'], [1 , 'desc']]
});
});
It's a good idea to get started with Client Side DataTables.
Note: Soon I will be writing an article on Server Side DataTables. Until then stay tuned and do enjoy my articles
Hope you enjoyed the article. Please share it with your friends.
Note: Code available in GitHub @ Client-Side DataTable
Comment And Like System Using Disqus
PHP extension ext-intl * is missing
What Is Composer? How Does It Work? Useful Composer Commands And Usage
Test Your Local Developing Laravel Web Application From Phone Browser Without Any Software
Supervisor For Laravel Queue Scheduling
Cache Static Files With NGINX Server
Dependency Dropdowns With Javascript And PHP
Unable to prepare route [{fallbackPlaceholder}] for serialization. Uses Closure In Laravel
Run Raw Queries Securely In Laravel
Testing Laravel Emails With MailHog
Send Email In PHP With PHPMailer
Install Linux, Apache, MYSQL, PHP (LAMP Stack) on Ubuntu
Lazy Load YouTube And Other Videos In Website