How to load data from nested arrays in DataTables ?
Last Updated :
29 Jul, 2024
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" />
<!--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>
How to load data from nested
arrays in DataTables
</h2>
<!--HTML table with employee data-->
<table id="tableID" class="display"
style="width:100%">
<thead>
<!--Required column headers
for employee -->
<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.
Similar Reads
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
2 min read
How to demonstrate the use of Ajax loading data in DataTables ? 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,
4 min read
How to read information from nested objects in DataTables ? 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,
4 min read
How to build an HTML table using ReactJS from arrays ? To build an HTML table using ReactJS from arrays we can use the array methods to iterate to iterate the elements and create the table rows Prerequisites:NPM & Node.jsReact JSJavaScript Array.map()HTML TableApproach: To build an HTML table from an array of elements using ReactJS, we can use the a
2 min read
DataTables info Option DataTables is jQuery plugin that can be used for adding interactive and advanced controls to HTML tables for the webpage. This also allows the data in the table to be searched, sorted, and filtered according to the needs of the user. The DataTable also exposes a powerful API that can be further used
3 min read
How to Select all Checkboxes in all Pages in jQuery DataTable ? Selecting all the table entries together at the same time in the jQuery data table can be achieved using the below methods. Before directly going to the implementation, first include the below CDN Links to your HTML document to implement the data table.Using the fnGetNodes() method of dataTableIn th
5 min read