How to load data from JavaScript array using jQuery DataTables plugin ?
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.
HTML
<!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 = "https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" /> <!-- jQuery library file --> < script type = "text/javascript" src = "https://code.jquery.com/jquery-3.5.1.js" > </ script > <!-- Datatable plugin JS library file --> < script type = "text/javascript" src = "https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js" > </ 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:
Contact Us