Skip to content
Related Articles

Related Articles

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
  <!--jQuery library file -->
  <script type="text/javascript" 
  <!--Datatable plugin JS library file -->
  <script type="text/javascript" 
  src=
  </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>

chevron_right


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.

  • Before execution:

  • After execution:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :