Handling nested data objects using jQuery DataTables plugin
Last Updated :
30 Jul, 2024
DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpage. It is a simple-to-use plug-in with many options for the developer’s custom changes. The common features of DataTables are sorting, ordering, searching, and pagination.
DataTables can easily read information for the columns from any nested JSON data source or arrays. The developer can try out many options given as per the application’s need.
The pre-compiled files needed for code implementation are as follows.
JavaScript:
https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
CSS:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
Example: The following example demonstrates the Ajax loading of nested JSON data objects in DataTables with client-side processing. The option used is columns.data property.
The following is the nested data for many users with their details like name, address, designation, and salary. This sample data is used in the following code.
Filename: nestedJSONdata.txt
{
"data": [
{
"name": "Tina Mukherjee",
"details": {
"designation": "BPO member",
"salary": "300000"
},
"address": [
"24,chandni chowk",
"Pune"
]
},
{
"name": "Gaurav",
"details": {
"designation": "Teacher",
"salary": "100750"
},
"address": [
"esquare,JM road",
"Pune"
]
},
{
"name": "Ashtwini",
"details": {
"designation": "Junior engineer",
"salary": "860000"
},
"address": [
"Santa cruz",
"mumbai"
]
},
{
"name": "Celina",
"details": {
"designation": "Javascript Developer",
"salary": "430060"
},
"address": [
"crr lake side ville",
"tellapur"
]
},
{
"name": "Aisha",
"details": {
"designation": "Nurse",
"salary": "160000"
},
"address": [
"rk puram",
"Delhi"
]
},
{
"name": "Brad henry",
"details": {
"designation": "Accountant",
"salary": "370000"
},
"address": [
"chaurasi lane",
"Kolkatta"
]
},
{
"name": "Harry",
"details": {
"designation": "Salesman",
"salary": "130500"
},
"address": [
"32, krishna nagar",
"Navi mumbai"
]
},
{
"name": "Rhovina",
"details": {
"designation": "Amazon supporter",
"salary": "300900"
},
"address": [
"Aparna zone",
"hyderabad"
]
},
{
"name": "Celina",
"details": {
"designation": "Senior Developer",
"salary": "200000"
},
"address": [
"23, chandni chowk",
"pune"
]
},
{
"name": "Glenny",
"details": {
"designation": "Administrator",
"salary": "200500"
},
"address": [
"Nagpur",
"Maharashtra"
]
},
{
"name": "Brad Pitt",
"details": {
"designation": "Engineer",
"salary": "100000"
},
"address": [
"sainikpuri",
"Delhi"
]
},
{
"name": "Deepa",
"details": {
"designation": "Team Leader",
"salary": "200500"
},
"address": [
"Annanagar",
"Chennai"
]
},
{
"name": "Angelina",
"details": {
"designation": "CEO",
"salary": "1000000"
},
"address": [
"JM road",
"Aundh pune"
]
}
]
}Filename: index.html
HTML
<!DOCTYPE html>
<html lang="en">
<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>Handling nested objects using jQuery Datatables </h2>
<!--HTML tables with user data-->
<table id="tableID" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Address</th>
<th>City</th>
<th>Salary</th>
</tr>
</thead>
</table>
<script>
// Initialization of datatables
$(document).ready(function () {
$('#tableID').DataTable({
"processing": true,
"ajax": "nestedJSONdata.txt",
"columns": [
{ "data": "name" },
{ "data": "details.designation" },
{ "data": "address.0" },
{ "data": "address.1" },
{ "data": "details.salary" }
]
});
});
</script>
</body>
</html>
Common error: The very common error which occurs in DataTables is Invalid JSON response. When the data tables are loaded with data, it expects valid JSON. If it encounters invalid data in the JSON structure, it throws the following warning.
DataTables warning: table id={tableID} - Invalid JSON responseWhere tableID is the id of the HTML table as in the above code implementation.
Output: The following output is shown in the case of valid JSON.
Similar Reads
How to handle events using jQuery DataTables plugin?
DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpage. It is a simple-to-use jQuery plug-in with a huge range of many options for the developer's custom changes. The common features of DataTables are sorting, searching, pagination, and mult
3 min read
How to design editable listview using jQuery Mobile plugin?
In this article, we will learn how to design an editable listview feature using the jQuery mobile plugin. The plugin provides an intuitive user interface to add or delete list items to the existing list. To design and implement the plugin, please download the required pre-compiled files or libraries
3 min read
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 handle DataTable specific events using jQuery DataTable plugin ?
DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpage. DataTables is a simple-to-use plug-in with a variety of options for the developer's custom changes. The common features of the DataTable plugin are pagination, searching, sorting, and m
3 min read
How to initialize multiple tables using jQuery DataTables plugin ?
DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our 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
3 min read
How to use API inside callbacks using jQuery DataTables plugin ?
Datatables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpages. DataTables is a simple-to-use jQuery plug-in with many options available for developer's custom changes. The other common features are pagination, searching, sorting, and multiple colu
3 min read
How to handle multiple rows selection using jQuery DataTables plugin ?
Datatables is a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpages. It is a simple and easy to use with a many options available for developer's custom changes. The other common features are pagination, searching, sorting and multiple column ordering. I
3 min read
How to pass multiple JSON Objects as data using jQuery's $.ajax() ?
The purpose of this article is to pass multiple JSON objects as data using the jQuery $ajax() method in an HTML document. Approach: Create a button in an HTML document to send JSON objects to a PHP server. In the JavaScript file, add a click event listener to the button. On clicking of the button, a
3 min read
How to display child row information using jQuery DataTables plugin ?
DataTables are modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpage. DataTable is a simple-to-use jQuery plug-in with many options for developer's custom changes. Some features of DataTables are pagination, searching, sorting and multiple column ordering.
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