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 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.

How to handle events using jQuery DataTables plugin?

geetanjali16

Improve

Article Tags :

Handling nested data objects using jQuery DataTables plugin

Similar Reads

Thank You!

What kind of Experience do you want to share?