How to display child row information using jQuery DataTables plugin ?

Last Updated : 02 Aug, 2024

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: