How to display child row information using jQuery DataTables plugin ?

Last Updated : 2 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:

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"
 }
 ]
}