How to load data from nested arrays in DataTables ?
Last Updated :
04 Apr, 2023
DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for a webpage. It is a very simple-to-use plug-in with a variety of options for the developer’s custom changes as per the application need. The plugin’s features include pagination, sorting, searching, and multiple-column ordering.
In this article, we will learn to read information for each employee from a nested array using the DataTables plugin.
Approach: The DataTables plugin’s column.data option is used to extract data from arrays using the dot notation. The dot(.) is used for accessing arrays or subarrays of the column.data option. The following implementation shows the reading of arrays.
The pre-compiled files which are needed to implement are
CSS:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
JavaScript:
https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
Structure of nested arrays: The following structure holds data for one employee. The key “name” holds values for first and last name, key “details” holds values for designation and salary followed with keys “location” and “city” with respective values.
row data
Example: The following code displays the data of all employees in an HTML table using the DataTable plugin. The JavaScript part of the following code extracts data from the “nestedSubarrays.txt” file. In the following example details.0 helps to get the Designation and details.1 helps to get the Salary for each employee. Similarly “data”: “location” get the location for that particular employee.
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" />
< link rel = "stylesheet" href =
< script type = "text/javascript"
</ script >
< script type = "text/javascript" src =
</ script >
</ head >
< body >
< h2 >
How to load data from nested
arrays in DataTables
</ h2 >
< table id = "tableID" class = "display"
style = "width:100%" >
< thead >
< tr >
< th >Name</ th >
< th >Location</ th >
< th >Designation</ th >
< th >Salary</ th >
</ tr >
</ thead >
</ table >
< script >
$(document).ready(function () {
/* Initialization of datatable
by table ID */
$('#tableID').DataTable({
"processing": true,
/* Disabled features for not
showing extra info */
"info": false,
"ordering": false,
"paging": false,
"ajax": 'nestedSubarrays.txt',
"columns": [
// 0th index value of name
// to show firstname
{ "data": "name.0" },
{ "data": "location" },
// 0th index value of details
// to show designation
{ "data": "details.0" },
// 1st index value of details
// to show salary
{ "data": "details.1" }
]
});
});
</ script >
</ body >
</ html >
|
nestedSubarrays.txt: The following is the data content for all the employees in the “nestedSubarrays.txt” file.
{
"data": [
{
"name": [
"Ashwini",
"Sharma"
],
"details": [
"System Architect",
"Rs.320,800"
],
"location": "chandni chowk",
"city": "Delhi"
},
{
"name": [
"Rakesh",
"Trivedi"
],
"details": [
"Solution Architect",
"Rs.420,800"
],
"location": "tellapur",
"city": "Hyderabad"
},
{
"name": [
"Ashu",
"Rana"
],
"details": [
"Accountant",
"Rs.120,100"
],
"location": "lal chowk",
"city": "Punjab"
},
{
"name": [
"Nupur",
"Joshi"
],
"details": [
"Developer",
"Rs.520,800"
],
"location": "Nallagandla",
"city": "Bangalore"
},
{
"name": [
"Jyotsna",
"Sharma"
],
"details": [
"Teacher",
"Rs.120,800"
],
"location": "New street",
"city": "Delhi"
},
{
"name": [
"Rajni",
"Singh"
],
"details": [
"System Admin",
"Rs.220,800"
],
"location": "Attapur",
"city": "Nagpur"
},
{
"name": [
"Tara",
"Sharma"
],
"details": [
"Tech lead",
"Rs.520,800"
],
"location": "chandni chowk",
"city": "Pune"
},
{
"name": [
"Ashmita",
"Sahoo"
],
"details": [
"System Lead",
"Rs.120,800"
],
"location": "chandni street",
"city": "Rajasthan"
},
{
"name": [
"Tony",
"Blair"
],
"details": [
"System Architect",
"Rs.620,800"
],
"location": "New lane",
"city": "Dharmshala"
},
{
"name": [
"Katrina",
"Kaif"
],
"details": [
"Engineer",
"Rs.320,800"
],
"location": "chandni chowk",
"city": "Mumbai"
},
{
"name": [
"John",
"Doe"
],
"details": [
"System Engineer",
"Rs.320,800"
],
"location": "Anna nagar",
"city": "Delhi"
},
{
"name": [
"Maya",
"Sharma"
],
"details": [
"Architect",
"Rs.520,800"
],
"location": "Sainikpuri",
"city": "Hyderabad"
}
]
}
Note: Suppose the above file data pattern is not according to the proper JSON format, then it throws a DataTable plugin’s warning as follows.
warning: table id={id-of-html-table} - Invalid JSON response.
Output:
- After execute: The following output shows that the table showing the “searching” operation for employees having designation holding “System” prefix like “System Architect”, “System Lead” and so on.
Designation search
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...