Interactive HTML tables using DataTables

Content

We all must have tried HTML tables and faced it’s limitation of being less interactive. In this blog, We’ll discuss a JQuery plugin for creating interactive HTML table. DataTables is a powerful jQuery plugin which can be used to create HTML tables with functionality like searching, sorting and pagination. It can use almost any data source like DOM, Ajax, and server-side processing. It is mobile friendly library which can adapt to the viewport size. Many well known companies are using DataTables plugin in their websites because it is free and open source.

Let’s see how we can add this in our website and use its advanced features.

In order to install it in our machine we can use one of the below methods:

1. Using DataTables CDN -

1
2
3
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

2. Local Installation - We can download the files and place it in our folder.

1
2
3
<link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">

<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>

3. Using Package manager like npm or bower -

1
2
npm install datatables.net # Core library
npm install datatables.net - dt # Styling

1
2
bower install--save datatables.net
bower install--save datatables.net - dt

After installation and importing the library in our HTML page. We need to create a HTML table like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>James</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Raj</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

In the Javascript, we need to initialise the DataTables.

1
2
3
4
5
$(document)
  .ready(function () {
    $('#table_id')
      .DataTable();
  });

That’s it. If we run it, we’ll get something like this:

Now let’s dynamically create the table and pass the data in Javascript itself.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var data = [{
    "Name": "Paul",
    "Age": 22,
    "Location": "Canada",
    "Contact": "+1290418345"
			},
  {
    "Name": "Erica",
    "Age": 32,
    "Location": "Miami",
    "Contact": "+1992418345"
			},
  {
    "Name": "Pritam",
    "Age": 29,
    "Location": "India",
    "Contact": "+91977418345"
			},
  {
    "Name": "Williams",
    "Age": 20,
    "Location": "England",
    "Contact": "+324290418345"
			}
			];

We created an array of JSON objects. Now we can pass this data to DataTable instance.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('#table_id')
  .DataTable({
    "destroy": true, // In order to reinitialize the datatable
    "pagination": true, // For Pagination
    "sorting": true, // For sorting
    "aaData": data,
    "columns": [{
      "data": "Name"
    }, {
      "data": "Age"
    }, {
      "data": "Location"
    }, {
      "data": "Contact"
    }]
  });

Sometimes we may need to use buttons(or some other HTML element) also in the table itself to process the data of that row. We can do that with the help of DataTables. Following code can help us accomplish that.

1
2
3
4
5
6
{
  "data": null,
  render: function (data, type, row, meta) {
    return "<button value=" + data['Contact'] + ">Click!</button>"
  }
}

In this example, we put a button by clicking that we can see the contact number of that particular person.

1
2
3
4
$('button')
  .on('click', function () {
      alert($(this)
        .val());