Implementing datatable with minimal efforts using jQuery Datatable plugin!!

Admin

October 5, 2016

Data-tables/grid is one of the most commonly used UI component. In this blog we’ll understand the basics of jQuery Data-table like its implementation, usage and advanced features.

Data-table is one of the powerful jQuery plugin used for creating table and adding interactions to them with very minimal efforts. In addition, it provides searching, sorting and pagination without any development efforts.

The topics I am going to cover in this blog are –

DataTable Set Up
Understanding library conventions
Getting Started
Summary

DataTable Set Up

Get the library files from the DataTables website.

Data table Plugin can be downloaded from the following links –

https://datatables.net/download/index

http://jquery.com/

In case you don’t want to maintain files locally, then you can use CDN’s like Microsoft CDN.

Prerequisite – It’s a jQuery plugin, so you need to include the jQuery library too.

Note – In the below code snippets we have used JS and CSS files from our local repository, you can download it and use it in the similar way or you can use CDN links.

Understanding library conventions

Before going to implementation, it would be useful to understand the conventions used in the data table library.

Hungarian notation are used for naming variables, so basically it adds certain prefix to its name which helps to understand type of data hold by the variable.

Variable represents an –

So it will be easy to identify type of data a variable is holding by the conventions mentioned above. While working with this plugin you may see multiple prefixes used together, like “ai” representing an array of integers.

Getting started

DataTable plugin can work with data from a variety of sources like it can work on an HTML table or using data as an array while loading the table or it can work on data coming from an Ajax call.

So let’s get started with the implementation of datatable. We will take two examples here to understand the plugin.

Example 1 – Creating datatable with data populated in HTML table itself

We have an HTML table with a column that contains names of food companies. Let’s see the power of DataTable plugin.

<html>
<head>
<linkrel="stylesheet"type="text/css"href=" jquery.dataTables.css">
</head>
<body>
<tableid="demo">
<thead>
<tr><th>Food Company</th></tr>
</thead>
<tbody>
<tr><td>Parle</td></tr>
<tr><td>Cadbury </td></tr>
<tr><td>Coco Cola</td></tr>
</tbody>
</table>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<scripttype="text/javascript"charset="utf8"src=" jquery.dataTables.min.js"></script>
<script>
  $(function(){
    $("#demo").dataTable();
})
</script>
</body>
</html>

With the very minimal efforts we have created a nice looking table containing search box, sorting on click of the column name. And you will be amazed to listen that this table is responsive too. Isn’t it amazing?

If you have to implement these feature’s by your own, just imagine how much time it would have taken.

So what we have done here is

Included Datatable CSS file
Included Datatable JS file
Instantiated datatable on the HTML table having ID ‘demo’ by $(“#demo”).dataTable()

Example 2 – Creating datatable with data populated from JavaScript array

Now we need to list more food companies with more details like company name, website and founder name using a JavaScript array instead of directly inserting data in HTML table.

Now we will first create an HTML table, with column headings and an empty table body.

<tableid="demo">
<thead>
<tr>
<thclass="foodcompany">Name</th>
<th>Website </th>
<th>Founder</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

Instantiating DataTable to this HTML table.

$("#demo").dataTable({
"aaData":[
["Parle","parle.com","Chauhan family"],
["CocaCola","cocacola.com","Asa Griggs Candler"],
["Cadbury","cadbury.com","John Cadbury"],
["Lays","lays.com","Founder"],
["Pepsi","pepsi.com","Donald M. Kendall"]
],
"aoColumnDefs":[{
"sTitle":"Food Company"
,"aTargets":["foodcompany "]
},{
"aTargets":[1]
,"bSortable":false
,"mRender":function(url, type,full ){
return'<a href="'+url+'">'+url+'</a>';
}
}]
});

Our table will be displayed as shown below. We will have a clickable link in the website column of all record.

Below is the description of the datatable options used in above example to display datatable using javascript array –

Summary

DataTables is a highly flexible and feature rich jQuery library to work with tables with a very minimal efforts.

References

https://datatables.net/examples/index