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
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
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.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rahul Singh
Rahul singh is a Java Developer and having experience in developing Applications. He is a quick learner.