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.







Super Charge Your HTML Table With DataTable | StackCoder


Client-Side DataTable, Adding Super Powers To HTML Table


Share On     Share On WhatsApp     Share On LinkedIn


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


  1. Downloading DataTables & CDN Usage
  2. HTML Template Using CDN's
  3. HTML Table
  4. Add DataTable Magic To Above Table
  5. Basic Full Example Demo
  6. Disabling Feature You Don't Need
  7. Customize Length Menu
  8. Number Of Rows Displayed Per Page
  9. Ordering Your Columns
  10. 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 add thead and tbody 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.


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

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

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

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

  1. If you have huge table data then all the data will be loaded at a stretch, which will impact on the performance issues.
  2. 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

  1. Server Side DataTable on the other hand will only get 10 records by default which you can change later in configuration.
  2. 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






Author Image
AUTHOR

Channaveer Hakari

I am a full-stack developer working at WifiDabba India Pvt Ltd. I started this blog so that I can share my knowledge and enhance my skills with constant learning.

Never stop learning. If you stop learning, you stop growing