Handling nested data objects using jQuery DataTables plugin
Last Updated :
08 Jan, 2021
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" />
<link rel="stylesheet"
href=
<script type="text/javascript"
<script type="text/javascript"
src=
</script>
</head>
<body>
<h2>Handling nested objects using jQuery Datatables </h2>
<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 response
Where 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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...