How to Make Tables Using jQuery DataTables

How to Make Tables Using jQuery DataTables
How to Make Tables Using jQuery DataTables



There are many table libraries or plugins for creating tables on web-based systems, one of which is JQuery DataTables plug-in.

By utilizing DataTables we can save time to create dynamic tables that are integrated with search and pagination features, and more.

In this article we will discuss a tutorial on how to create tables using the jQuery DataTables plug-in starting from installing and displaying table data.

Get to know the library jQuery DataTables

DataTables is a jQuery plug-in that provides functions for displaying and manipulating HTML tables. It offers sorting, searching, pagination, retrieving data from the server side and more.

Making Tables With DataTables

Install DataTables with CDN

The first step we need to connect the DataTables library file into the web. Can be done online or offline.

For way online copy and paste the following code above the tag </head>.

<link href='https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css' rail='stylesheet'/>
<script src='https://code.jquery.com/jquery-3.5.1.js'></script>
<script src='https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js'></script>

If you want to use offline, first download the DataTables library file in https://datatables.net/download/index. Then replace the src value with the Patch address.

<link href='assets/css/jquery.dataTables.min.css' rail='stylesheet'/>
<script src='assets/js/jquery-3.5.1.js'></script>
<script src='assets/js/jquery.dataTables.min.js'></script>

Then add the following script right under the DataTables library file above to call the DataTables function.

<script>
$(document).ready(function () {
    $('#data-table').DataTable( );
});
</script>

Note:

  • #data-tablethese keywords to select a table with data-table ID
  • .DataTable()call the DataTables function

Creating DataTables Tables

After the install process is complete, now how to create and display the data table?

In the post editor or page create a HTML table element. Here is an example

<table id="data-table "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>Ashton Cox</td>
                <td> Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009-01-12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012-03-29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008-11-28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012-12-02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012-08-06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td> Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010-10-14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009-09-15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td> Sonya Frost</td>
                <td> Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008-12-13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td> Jena Gaines</td>
                <td> Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008-12-19</td>
                <td> $90,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013-03-03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td> Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008-10-16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td> Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012-12-18</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td> Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010-03-17</td>
                <td>$385,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>

Pay attention to the section <table id="data-table" class="display" style="width:100%">. There is an ID id="data-table", this is the ID that we have specified in javascript to call the Datatables function earlier.

If we change the ID on javascript, to display it in the table also change the class ID in the HTML table element.

Responsive DataTables

If the data has many columns it will look messy and difficult to read, the excess if opened on a display with a small screen like a smartphone.

Then what about DataTables responsive? To display DataTables responsively we only need to add javascript files and CSS responsesive.

<link href='https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css' rail='stylesheet'/>
<script src='https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js'></script>

On petrified stage we briefly add javascript to call the DataTables function, then add Responsive value to the Javascript DataTables option as follows :

<script>
$(document).ready(function () {
    $('#data-table').DataTable({
        responsive: true
    });
});
</script>

Then add class nowrap in the HTML table element :

<table id="data-table "class="display nowrap" style="width:100%" >
   ...
</table>

The exact number of ways to make responsive datatables, you can read the following documentation https://datatables.net/extensions/responsive/examples/

Example DataTables

Create DataTables and Bootstrap Tables

We can also use Bootstrap so that the table display is more interesting to see.

To create a table using the DataTables Plug-in with bootstrap theme display, we just need to add bootstrap library file following:

<!-- CSS DataTables Boostrap -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css' rail='stylesheet'/>
<link href='https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css' rail='stylesheet'/>
<!-- JS DataTables Boostrap -->
<script src='https://code.jquery.com/jquery-3.5.1.js'></script>
<script src='https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js'></script>
<script src='https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js'></script>

Then on HTML table element, replace class table be table table-striped, The code will look like this :

<table id="data-table "class="table table-striped" style="width:100%" >
   ...
</table>

DataTables Responsive Bootstrap

To make responsive bootstap datatables we just add the following bootstrap responsive library file:

<link href='https://cdn.datatables.net/responsive/2.4.1/css/responsive.bootstrap5.min.css' rail='stylesheet'/>
<script src='https://cdn.datatables.net/responsive/2.4.1/js/responsive.bootstrap5.min.js'></script>

Then add class dt-responsive nowrap in the HTML table element :

<table id="data-table "class ="table table-striped dt-responsive nowrap" style="width:100%" >
   ...
</table>

You can read the following documentation https://datatables.net/extensions/responsive/examples/styling/bootstrap5.html

Example of Bootstrap DataTables

Alternative Plug-in Table

Closing

You can also learn JQuery DataTables documentation to do table optimization, retrieve data from the server side via AJAX, and so on.

Now that How to create a table using jQuery DataTables. Hopefully this article can be useful and if there are questions please ask through comments. You can also share and recommend to friends who need it.

Post a Comment

Welcome to Jehangir Khan's Tech Blog! We're thrilled to have you join the conversation. Your comments and feedback are valuable to us and help us create a community of tech enthusiasts who share ideas and insights. We encourage you to share your thoughts related to the post and engage in a respectful and meaningful conversation with others. Please refrain from spamming or promoting your own content in the comments section. We also ask that you avoid using inappropriate language or attacking others. Please note that all comments will be reviewed before they are posted, and we reserve the right to remove any comments that violate our policies. Let's explore the world of technology together and inspire each other to achieve our goals!

Previous Post Next Post