Jquery DataTable example along with serverside data

Here in this Jquery DataTable example we’ll explore how to use jquery DataTable for drawing tables with serverside rendered data.

JQuery DataTable is a powerful library to display information in interactive tables and adding functionalities to them. Regardless of how well datatables.net has written their documentation most of us find difficulties to implement and update the table over time.

In this guide, we’ll talk about everything you need to know to display the information using jquery DataTables. We’ll discuss drawing a basic table using static data and also drawing the table with javascript sourced data. And in the end, I’ll tell you the way you can update the table without re-initializing it again. So let’s begin.

How to use Jquery DataTable example in your website

First things first, In order to draw the table we need to include Jquery datatable’s JS and CSS files.

#css file
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">

#jquery & Datatable
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

Once included in the files, drawing a table is a straightforward task. Create an HTML table with static inputs inside the table cells. The following example is adapted from the official documentation.

<table id="example" 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>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>
        </tbody>
    </table>   

After that call the jquery datatable method with the table Id specified.

<script>
$('#example').DataTable();
</script>

As you can see drawing a basic datatable with static input is a very easy and less time-consuming task. In the next step, we’ll discuss drawing a table with the help of Javascript sourced data.

Data table with JavaScript sourced data

Most of the time data tables are used to display those data which are likely to change in the future. In that case, we have to create and destroy the table dynamically with the latest data.

So here in this Jquery DataTable example, we can use a different approach to draw the table with server-side data. These data can be fetched from anywhere. Like from a REST API or a database.

Here I’m going to use fetch API which is inbuilt in most of the browsers. If you are unfamiliar with Fetch API, read this guide of Mozilla Web.

Apart from the static table, we’ll create only a table element without any table body.

<table id="sourced" class="display" width="100%"></table>

As I mentioned above, I’ll be using Jsonplaceholder to load the data which is free to use for learning and demo purposes. In the Javascript, add this code to fetch the data we needed for the table.

let dataset;
fetch('https://jsonplaceholder.typicode.com/users')
   .then(response => response.json())
   .then(json => dataset = json)
   .then(dataset => {
   //function to load datatable
       drawTable();
   })

And in the drawTable function, we’ll call the data table method with sourced data. Also here we’ll specify all the column names.

let data = [];
let table;
function drawTable(){
    for(i in dataset){
         data = dataset.map(obj => Object.values(obj))
    }
    //Remove unnecessary data
    for(let i=0;i<data.length;i++){
        data[i].splice(4,4);
    }
    table = $('#sourced').DataTable( {
       data: data,
       columns: [
            { title: "id" },
            { title: "Name" },
            { title: "Username" },
            { title: "E-mail." },
        ]
    });
 }

In conclusion, we have fetched data from a REST API and loaded the data table dynamically with the help of API data. In some cases, we need to re-draw the chart using updated data. The data table does not support the re-initialization of the table directly. But they do have some API’s to destroy chart and re-draw it again.

To re-draw the chart with the new data, including this conditional statement at the beginning of the drawTable function will help.

if(chart != null){
   chart.destroy();
}

This condition will check the status of the chart variable. If It’s not null It’ll destroy the table. So we can continue with initialization again.

Conclusion

I hope this article helped you to understand how Jquery DataTables work. If so, feel free to share with fellow developers and comment below for any confusion. Thank you.

Expo managed workflow vs Bare workflow – React native