DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpages. It is a simple-to-use plug-in with a huge range of options for the developer’s custom changes. The common features of the DataTable plugin are paging, multiple column ordering, sorting, and searching.
The pre-compiled files which are needed for code implementation are
CSS :
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
JavaScript :
//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
Approach: The approach followed is passing dynamic data to the dataTable rather than passing information from any document. The steps taken are as follows.
- Pass a JavaScript array dataSet for user’s data with name, designation, salary, and address as data to be used.
- HTML table is used with table id as tableID.
- Datatable is initialized with the table id.
- In the script part, the JS array is passed by using the data option.
- Even the columns are dynamically created using the columns.title option.
Example: The following example demonstrates to load data from JavaScript array in datatables using the plugin.
<!DOCTYPE html> < html >
< head >
< meta content=" initial-scale = 1 , maximum-scale = 1 ,
user-scalable = 0 " name = "viewport" />
< meta name = "viewport" content = "width=device-width" />
<!-- Datatable plugin CSS file -->
< link rel = "stylesheet" href =
<!-- jQuery library file -->
< script type = "text/javascript" </ script >
<!-- Datatable plugin JS library file -->
< script type = "text/javascript" src =
</ script >
</ head >
< body >
< h2 >load data from JavaScript array using Datatables</ h2 >
<!--HTML table with student data-->
< table id = "tableID" class = "display" style = "width:100%" >
< thead >
< tr >
< th >User name</ th >
< th >Designation</ th >
< th >Salary</ th >
< th >Address</ th >
< th >City</ th >
</ tr >
</ thead >
</ table >
< script >
var dataSet = [
[
"Tina Mukherjee",
"BPO member",
"300000",
"24,chandni chowk",
"Pune"
],
[
"Gaurav",
"Teacher",
"100750",
"esquare,JM road",
"Pune"
],
[
"Ashtwini",
"Junior engineer",
"860000",
"Santa cruz",
"mumbai"
],
[
"Celina",
"Javascript Developer",
"430060",
"crr lake side ville",
"tellapur"
],
[
"Aisha",
"Nurse",
"160000",
"rk puram",
"Delhi"
],
[
"Brad henry",
"Accountant",
"370000",
"chaurasi lane",
"Kolkatta"
],
[
"Harry",
"Salesman",
"130500",
"32, krishna nagar",
"Navi mumbai"
],
[
"Rhovina",
"Amazon supporter",
"300900",
"Aparna zone",
"hyderabad"
],
[
"Celina",
"Senior Developer",
"200000",
"23, chandni chowk",
"pune"
],
[
"Glenny",
"Administrator",
"200500",
"Nagpur",
"Maharashtra"
],
[
"Brad Pitt",
"Engineer",
"100000",
"sainikpuri",
"Delhi"
],
[
"Deepa",
"Team Leader",
"200500",
"Annanagar",
"Chennai"
],
[
"Angelina",
"CEO",
"1000000",
"JM road",
"Aundh pune"
]
];
$(document).ready(function() {
$('#tableID').DataTable( {
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Designation" },
{ title: "Salary" },
{ title: "Address" },
{ title: "City" }
]
} );
} );
</ script >
</ body >
</ html >
|
Output:
Before execute:
After execute: