Render Data Using JQuery Datatables API

Posted By : Rahul Singh | 23-Sep-2017

 

 

Hi, guys, nowadays Datatables is most use in web development to customize table and some extra feature to reduce the time of developer for better user interface. The data table is plugin jQuery with some feature to print table.


What is Datatables:

Datatables is basically rendered the data in grid manner (row, column) and also with development requirements. This plugin design for jQuery javascript library which gives more advanced and stylish than basic HTML table to render data.

Why we used Datatables:

Datatables provides us more feature to use render data in table (row, column) manner. For Example instant search, pagination, multi-column ordering. It supports all type of data sources like ajax response from any server-side programming language (Java, Net, Php and more), JSON objects. Data first set in DOM and then perform all data tables features. There is the reason why data table comes in web development because basic HTML table does not fulfill the requirements of development.


Top 5 extra ordinary Feature in data tables:
1. Create table dynamically and when getting current data it has function to delete previous data and refresh table.
2. Pagination is one of the most features which arranges huge amount of data and manages the number of rows like 10,20,50 rows at one time to show.
3. Instant search in the table means you find data in all rows or column(s).
4. You can filter the data in a column and also sort data column-wise in ascending or descending manner.
5. We also append custom functionality in an individual column like - hyper link, the tooltip on data, conditions on data, manage checkboxes.

 

 

Example of render data using Datatables

 

data.html

 
 
 
 
 
 
 
 
Name Date Of Birth Gender Salary  

 

 

data.js


//suppose this type of json data come from server side when ajax call.
 
var jsonData = [
{"name": "Ajit Singh", "dob": "March 25 1992", "gender": "Male", "salary": "50000"},
{"name": "Riya Jain", "dob": "Aug 02 1990", "gender": "Female", "salary": "43000"},
{"name": "Ankit Sharma", "dob": "Nov 03 1985", "gender": "Male", "salary": "23000"},
{"name": "Rahul Singh", "dob": "Feb 07 1988", "gender": "Male", "salary": "76000"},
{"name": "Anuradha Gupta", "dob": "Sept 06 1991", "gender": "Female", "salary": "45000"},
{"name": "Lokesh Verma", "dob": "Nov 17 1993", "gender": "Male", "salary": "19000"},
{"name": "Murari Ojha", "dob": "Dec 27 1997", "gender": "Male", "salary": "23000"},
{"name": "Karan Khanna", "dob": "March 15 1994", "gender": "Male", "salary": "45000"},
{"name": "Faisal Khan", "dob": "Sep 15 1990", "gender": "Male", "salary": "65000"},
{"name": "Shammi Singh", "dob": "March 24 1992", "gender": "Male", "salary": "23000"},
{"name": "Ravinder Mahan", "dob": "Apr 01 1982", "gender": "Male", "salary": "63000"},
{"name": "Ankush Yadav", "dob": "Nov 21 1989", "gender": "Male", "salary": "77000"},
{"name": "Nittu Singh", "dob": "June 18 1990", "gender": "Female", "salary": "55000"},
{"name": "Neha Sahavaliya", "dob": "Mar 25 1992", "gender": "Female", "salary": "97000"},
{"name": "Preeti Kushwaha", "dob": "Dec 31 1991", "gender": "Female", "salary": "56000"},
{"name": "Azhar Shaini", "dob": "Feb 11 1995", "gender": "Male", "salary": "83000"} 
];
 
var tableData={};
 
$(document).ready(function() {
 
renderDataTable(response);
 });
 
var tableData={};
var renderDataTable = function(response){
if( tableData && ( tableData.length > 0 ) ){
tableData.fnClearTable();
tableData.fnAddData(response.data);
} 
else{
   tableData = $('#renderData').dataTable({
    "bPaginate": true,
       "bFilter": true,
       "bSort": true,
       "aaData": response,
       "sDom": '<"top"<"clear">>rt<"bottom"lip<"clear">>',
       "aoColumns": [{
        mData: 'name'
            }, {
               mData: 'dob'
            }, {
               mData: 'gender'
            }, {
               mData: 'salary'
            }],
}); 
} //else
}//renderDataTable 

figure

 

If You want to render data using ajax call then use this Example:


$.ajax({
       type: 'GET',
       url: '/getDataFromDB.do', // this is url location where we get response data from server side applicatiaon
       contentType: 'application/json',
       dataType: 'json',
       success: function(response) {
        if(response.isSuccess){
        renderDataTable(response); //pass response to "aaData" column according to your "aoColumns" in table
        }
       }
}); 
 

Use the previous Example for rendering data.

Note: Purpose of this ajax call is simply to does not need to reload the whole page, nowadays ajax call prepare the data according to need and refresh the part of the page.

 

 

 

 

 

About Author

Author Image
Rahul Singh

Rahul singh is a Java Developer and having experience in developing Applications. He is a quick learner.

Request for Proposal

Name is required

Comment is required

Sending message..