How to display child row information using jQuery DataTables plugin ?

27 Jan, 2021
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.
In this article, we will learn to use DataTable API methods to attach child row to parent row and display its information. This feature is useful when the developer wants to show additional information for a row in a data table. 
The pre-compiled files which are needed to implement the codes are as follows. 
CSS:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
JavaScript:
//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
Approach: In the following example, employee details like employee_id, name, designation, salary, and address are present in an Ajax text file “nestedData.txt”. An HTML table is used for storing all the details in rows and columns. 
In JavaScript part of the code, the DataTable is initialized using the plugin. On click, events are handled to show and hide more information for a particular data row. This is implemented by using the API’s row.child.show() and row.child.hide() methods. There are other methods as well.
The getChildRow() function in the following code defines the design/display content for the child row clicked by the user. The developer can change the code as per the application’s need.
Example:
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="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>      <style>        td.details-control {            /* Image in the first column to                indicate expand*/            background: url('images/more.png')                no-repeat center;                              cursor: pointer;        }          tr.shown td.details-control {            background: url('images/shrinkdata.PNG')                 no-repeat center;        }    </style>  </head>  <body>    <h2>        Display child row detailed         information using DataTable    </h2>          <!--HTML tables with employee data-->    <table id="tableID" class="display"         style="width:100%">                  <thead>            <tr>                <th></th>                <th>Name</th>                <th>Designation</th>                <th>City</th>                <th>Salary</th>            </tr>        </thead>      </table>      <script>          /* Function for child row details*/        function getChildRow(data) {                          // `data` is the data object for the row            return '<table cellpadding="5" cellspacing="0"'                + ' style="padding-left:50px;">' +                '<tr>' +                '<td>Full name:</td>' +                '<td>' + data.name + '</td>' +                '</tr>' +                '<tr>' +                '<td>Address in detail:</td>' +                '<td>' + data.address + '</td>' +                '</tr>' +                '<tr>' +                '<td>Extra details like ID:</td>' +                '<td>' + data.employee_id + '</td>' +                '</tr>' +                '</table>';        }          $(document).ready(function () {                          /* Initialization of datatables */            var table = $('#tableID').DataTable({                "ajax": "nestedData.txt",                "columns": [{                    "className": 'details-control',                    "orderable": true,                    "data": null,                    "defaultContent": ''                },                    { "data": "name" },                    { "data": "designation" },                    { "data": "city" },                    { "data": "salary" }                ],                "order": [[1, 'asc']]            });              // Click events for expanding and            // closing using up/down arrows            $('#tableID tbody').on('click',             'td.details-control', function () {                  var tr = $(this).closest('tr');                var row = table.row(tr);                  if (row.child.isShown()) {                      // Closing the already opened row                               row.child.hide();                      // Removing class to hide                    tr.removeClass('shown');                }                else {                      // Show the child row for detail                    // information                    row.child(getChildRow(row.data())).show();                      // To show details,add the below class                    tr.addClass('shown');                }            });        });            </script></body>  </html>
nestedData.txt: The following has the data for “nestedData.txt” file used in the Ajax option in the above code.
{
  "data": [
    {
      "employee_id": "emp1",
      "name": "Teza",
      "designation": "Architect",
      "salary": "Rs.350,800",     
      "city": "Lucknow",
      "address": "54,komal street"
    },
    {
      "employee_id": "emp2",
      "name": "Garima",
      "designation": "Accountant",
      "salary": "Rs.180,050",    
      "city": "Hyderabad",
      "address": "Hitech city,kodapur"
    },
    {
      "employee_id": "emp3",
      "name": "Ashmita",
      "designation": "Technical Author",
      "salary": "Rs.186,000",    
      "city": "Kolkatta",
      "address": "156, new park,chowk"
    },
    {
      "employee_id": "emp4",
      "name": "Celina",
      "designation": "Javascript Developer",
      "salary": "Rs.450,000",     
      "city": "Itanagar",
      "address": "chandni chowk,new lane"
    },
    {
      "employee_id": "emp5",
      "name": "Asha",
      "designation": "Accountant",
      "salary": "Rs.542,700",   
      "city": "Tokyo",
      "address": "54,Japanese colony"
    },
    {
      "employee_id": "emp6",
      "name": "Baren Samal",
      "designation": "Integration Specialist",
      "salary": "Rs.370,000",    
      "city": "New Delhi",
      "address": "48,RK puram"
    },
    {
      "employee_id": "emp7",
      "name": "Hari Om",
      "designation": "Sales Manager",
      "salary": "Rs.437,500",     
      "city": "Raipur",
      "address": "Sector 6,bhilai"
    },
    {
      "employee_id": "emp8",
      "name": "Ranu",
      "designation": "Integration Specialist",
      "salary": "Rs.330,900",     
      "city": "Tokyo",
      "address": "64,indian colony"
    },
    {
      "employee_id": "emp9",
      "name": "Celly",
      "designation": "PHP Developer",
      "salary": "Rs.275,500",    
      "city": "Secunderabad",
      "address": "23,Sainikpuri"
    },
   {
      "employee_id": "emp55",
      "name": "Ama",
      "designation": "Director",
      "salary": "Rs.985,000",    
      "city": "kanpur",
      "address": "63,Narangi lane"
    },
    {
      "employee_id": "emp56",
      "name": "Michael Jackson",
      "designation": "C++ Developer",
      "salary": "Rs.783,000",    
      "city": "Singapore",
      "address": "53,Sweetpark"
    },
    {
      "employee_id": "emp57",
      "name": "Danny",
      "designation": "Customer Support",
      "salary": "Rs.345,000",    
      "city": "Ludhiana",
      "address": "456,Punjab"
    }
  ]
}
Output:
Before child row display:
              
After child row display 1:
                           
After child row display 2:
                             
CSS-Misc
HTML-Misc
jQuery-Misc
CSS
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.