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:
- Before child row display:
- After child row display 1:
- After child row display 2:
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing