
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
Plain PHP Resumable Large File Uploads In Chunks Using FlowJs
Getting Started With AMP (Accelerated Mobile Pages)
Testing Laravel Emails With MailHog
Send Email In PHP With PHPMailer
Make Laravel Controllers Slim By Skimming Form Validation Request
PHP extension ext-intl * is missing
URL Redirects From Called Functions In Laravel
Factories To Speed Up Test-Driven Development In Laravel
Automate Repeating Tasks In Linux Server With Cronjobs
Stripe Payment Integration With Laravel
Create A Composer Package? Test It Locally And Add To Packagist Repository
Setup AMP (Accelerated Mobile Pages) In PHP Laravel
Laravel Last Executed Query In Plain SQL Statement For Debugging