Client-Side DataTable, Adding Super Powers To HTML Table

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 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 , you can name as per your convenience. You can even use the class name here.

Using this **id="datatable"** we will initialize DataTable later.

#html