DataTables – Turn your ordinary HTML table into an interactive table

DataTables is a plug-in that can turn your ordinary table into an awesome interactive table. You just have to call a function only. So let’s get started.

If you are using Bootstrap then awesome, just include these files into the HTML document:

CSS:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap4.min.css" />

JS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/dataTables.bootstrap4.min.js"></script>

And of course, you will have to include Bootstrap and jQuery also.

A simple bootstrap table :

<table class="table table-hover table-stripe" id="example_table">
    <thead>
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>Address</td>
            <td>Contact</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Sariful Islam</td>
            <td>Kolkata</td>
            <td>983 xxx xxxx</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Prem Mahato</td>
            <td>Kolkata</td>
            <td>768 xxx xxxx</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Sourav Banik</td>
            <td>Kolkata</td>
            <td>981 xxx xxxx</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Sk Saif</td>
            <td>Kolkata</td>
            <td>907 xxx xxxx</td>
        </tr>
    </tbody>
</table>

And then just call a single DataTables function:

$(document).ready(function() {
    var example_table = $('#example_table').DataTable();
});

That’s it.

If you are not using Bootstrap, no problem!! They have designed for other UI libraries like Foundation, Semantic UI, Material Design and UIKit 3 also.

Advanced Options:

DataTable is a huge library to cover up on a single article, I will cover some of them which are necessary to create a simple application.

1. Ajax Source in DataTables:

We use jQuery ajax to get data from the server. DataTables have included the jQuery ajax inside DataTable. Here is a simple example of that:

The table:

<table class="table table-hover table-stripe" id="example_table">
    <thead>
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>Position</td>
            <td>Salary</td>
        </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

Here is the ajax request to fetch data from backend:

var example_table = $('#example_table').DataTable({
    ajax: {
        url: '/api/users', // the url to get data from
        dataSrc: function(data) {
            return data.data; // returning the source of the data (it requires an array of data)
        }
    },
    columns: [
        {
            data: "id" // 1st column will render the "id" from data
        },
        {
            data: "name"  // 2nd column will render the "name" from data
        },
        {
            data: "position" // 3rd column will render the "position" from data
        },
        {
            data: "salary" // 4th column will render the "salary" from data
        }
    ]
});

The data source :

{
    "data": [
        {
            "id": "1",
            "name": "Tiger Nixon",
            "position": "System Architect",
            "salary": "320,800",
            "start_date": "2011/04/25",
            "office": "Edinburgh",
            "extn": "5421"
        },
        {
            "id": "2",
            "name": "Subhan Ghosh",
            "position": "Software engineer",
            "salary": "320,800",
            "start_date": "2011/04/25",
            "office": "Kolkata",
            "extn": "5421"
        },
        ...
    ]
}

The data source should contain an array of data to show in a table. The data should look like the above example

2. Individual Columns Search in DataTables:

There are simple searches in DataTables. But that is a global search, means it will search thoroughly from the table. In order to search from a particular column, here is the solution:

$('#example_table tfoot th').each(function() {
    var title = $(this).text();
    $(this).html('<input type="text" class="form-control" placeholder="Search ' + title + '" />');
});

// DataTable
var example_table = $('#example_table').DataTable();

// Apply the search
example_table.columns().every(function() {
    var that = this;
    $('input', this.footer()).on('keyup change', function() {
        if (that.search() !== this.value) {
            that
                .search(this.value)
                .draw();
        }
    });
});

3. Column Totals:

You can also show the totals of a column at the footer of the table.

var example_table = $('#example_table').DataTable({
    ajax:  ...,
    columns: ...
    footerCallback: function(tfoot, data, start, end, display) {
        var api = this.api();
        $(api.column(3).footer()).html(
            api.column(3).data().reduce(function(a, b) {
                return a + b;
            }, 0)
        );
    }
});

4. Show extra / Detailed information:

If you want to show extra information on clicking any td, all you have to do is get the click event using jQuery then using .row().data() function we can get the data of that row as the example Below:

I used simple alert to show the data. You can use this data as per your need.

$('#example_table tbody').on('click', 'td', function () {
	var the_tr = $(this).parents("tr");
    var row_data = example_table.row(tr).data();

    alert(JSON.stringify(row_data));
});

There are a plethora of options out there to use. You can add a date range system in a jQuery DataTables I wrote an article on that.

Here is the official website of their full documentation.