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.
Client-Side DataTable, Adding Super Powers To HTML Table
14th July 2020
9 mins read
Share On
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
- Downloading DataTables & CDN Usage
- HTML Template Using CDN's
- HTML Table
- Add DataTable Magic To Above Table
- Basic Full Example Demo
- Disabling Feature You Don't Need
- Customize Length Menu
- Number Of Rows Displayed Per Page
- Ordering Your Columns
- Final Thoughts On Client Side DataTables And Whats Next?
Note: Code available in GitHub @ Client-Side DataTable
Step 1 - Downloading DataTables
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.
jQuery
CDN / Download URL - jQuery CDN
jQuery DataTable Library
CDN / Download URL - DataTable CDN
DataTable CSS
CDN / Download URL - DataTable CSS
That's it 3 files.
Step 2 - HTML Template Using CDN's
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.
Step 3 - HTML Table
NOTE: Make sure to addtheadandtbodytags 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.
Step 4 - Add DataTable Magic To Above Table
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?
Step 5 - Basic Full Example Demo
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>
Step 6 - Disabling Feature You Don't Need
You can easily disable the features you don't need with DataTable very easily with the following settings
Example
$(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
Step 7 - Customize Menu Length (lengthMenu)
DataTable Customize Length
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"] ]
});
});
Step 8 - Number Of Rows Displayed Per Page (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
Step 9 - Ordering Your Columns
NOTE: By default this feature is enabled, it will order in ascending for the first column in default mode
DataTable Default Ordering
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 */
});
});
DataTable Multi-Column Ordering
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)
MultiColumn Ordering
$(document).ready(function() {
$('#datatable').DataTable({
"lengthMenu": [ [5, 10, 25, 50, -1], [5, 10, 25, 50, "All"] ],
"pageLength": 5,
"order" : [[0, 'asc'], [1 , 'desc']]
});
});
Final Thoughts On Client Side DataTables And Whats Next?
It's a good idea to get started with Client Side DataTables.
Client Side DataTable Disadvantages
- If you have huge table data then all the data will be loaded at a stretch, which will impact on the performance issues.
- Searching, Sorting will be smoother as the data is loaded at a stretch but it's a bad practice to get huge data with a single shot.
Server Side DataTables
- Server Side DataTable on the other hand will only get 10 records by default which you can change later in configuration.
- Searching & Sorting will also happen on demand ie whenever user tries to Search or Sort.
Note: Soon I will be writing an article on Server Side DataTables. Until then stay tuned and do enjoy my articles
Conclusion
Hope you enjoyed the article. Please share it with your friends.
Note: Code available in GitHub @ Client-Side DataTable
Articles For You
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
