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 read information for each employee from a nested data object using the DataTables plugin.
Approach: The DataTables plugin’s column.data option is used to extract data from the nested JSON data up to any level. The dot(.) is used for accessing another object level of the column.data option.
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
Example: The following code displays the data of all employees in an HTML table using the DataTables plugin.
Structure of employee data: The employee detail is in nested object data form.
structure of details of one employee
HTML code: The JavaScript part of the following code extracts data from the “nestedJSONData.txt” file. In the following example, details.designation helps to get the designation for details object for each employee and details.salary gets the salary for details object. Similarly, address.0 and address.1 get the location and city 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= <!-- jQuery library file --> <script type="text/javascript" </script> <!-- Datatable plugin JS library file --> <script type="text/javascript" src= </script> </head> <body> <h2> How to read information from nested objects in DataTables </h2> <!--HTML table with employee data--> <table id="tableID" class="display" style="width:100%"> <thead> <!--Column headers for employee data--> <tr> <th>Name</th> <th>Designation</th> <th>Salary</th> <th>Location</th> <th>City</th> </tr> </thead> </table> <script> /* Initialization of datatable */ $(document).ready(function () { /* table ID is taken for datatable access */ $('#tableID').DataTable({ "processing": true, "info": false, /* Set pagination feature */ "paging": true, "ajax": 'nestedJSONData.txt', "columns": [ { "data": "name" }, // designation key of details to // show designation { "data": "details.designation" }, // salary key of details to show salary { "data": "details.salary" }, // 0th index of address to show location { "data": "address.0" }, // 1st index of address to show City { "data": "address.1" } ] }); }); </script> </body> </html> |
nestedJSONData.txt file: The following is the content for this file having nested object data for all employees. This file is used in the above HTML code.
{
"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"
]
}
]
}
Output:
Before execution:
After execution: The following output shows that the table showing the “searching” operation for employees having city holding string as “Pune” and so on.
