Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to display child row information using jQuery DataTables plugin?
In this article, we will learn how to display child row information using jQuery DataTables plugin. We will also provide some HTML code examples to illustrate the usage of this feature.
jQuery DataTables is a powerful plugin that provides an easy way to display tabular data on a web page. It has a lot of features such as pagination, sorting, searching, etc. It also provides us with the DataTables plugin, which gives us the ability to display child row information, and consequently shows additional data related to each row.
Now, let’s understand the feature with the help of some examples.
Example 1
In this example, we will create a simple HTML table containing a list of employees, and some information about them. We will also add the child row information to this, and define its content using a function.
<html lang="en">
<head>
<title>How to display child row information using jQuery DataTables plugin?</title>
<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include DataTables library -->
<script src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.min.js"></script>
<!-- Include required CSS files -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables_themeroller.css">
</head>
<body>
<h3>How to display child row information using jQuery DataTables plugin?</h3>
<table id="employee-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Manager</td>
<td>$80,000</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Developer</td>
<td>$60,000</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>Developer</td>
<td>$50,000</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#employee-table').DataTable({
"paging": false,
"info": false,
"columnDefs": [
{
"targets": [1],
"className": "details-control"
}
],
"order": [[0, 'asc']],
"drawCallback": function() {
$('.details-control').unbind('click').on('click', function() {
var tr = $(this).closest('tr');
var row = $('#employee-table').DataTable().row(tr);
if (row.child.isShown()) {
row.child.hide();
tr.removeClass('shown');
} else {
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
}
});
function format(d) {
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<td>Name:</td>' +
'<td>' + d[0] + '</td>' +
'</tr>' +
'<tr>' +
'<td>Position:</td>' +
'<td>' + d[1] + '</td>' +
'</tr>' +
'</tablev';
}
});
</script>
</body>
</html>
Example 2
In this example, we will add a button with the class "details-control" in each row, and when clicked, it will show the inline HTML content as a child row using the format function. The child row will contain additional details about the respective employee.
Filename: index.html
<html lang="en">
<head>
<title>How to display child row information using jQuery DataTables plugin?</title>
<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include DataTables library -->
<script src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.min.js"></script>
<!-- Include required CSS files -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables_themeroller.css">
</head>
<body>
<h3>How to display child row information using jQuery DataTables plugin?</h3>
<table id="employee-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Manager</td>
<td>$80,000</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Developer</td>
<td>$60,000</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
const table = $('#employee-table').DataTable({
"columnDefs": [
{
"targets": [0, 1],
"className": "details-control",
"orderable": false
}
],
"order": [[0, 'asc']]
});
$('#employee-table tbody').on('click', 'td.details-control', function () {
const tr = $(this).closest('tr');
const row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
function format(data) {
const details = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<td>Name:</td>' +
'<td>' + data[0] + '</td>' +
'</tr>' +
'<tr>' +
'<td>Position:</td>' +
'<td>' + data[1] + '</td>' +
'</tr>' +
'</table>';
return details;
}
});
</script>
</body>
</html>
Conclusion
In conclusion, the jQuery DataTables plugin provides an easy and efficient way to display data in a tabular format on web pages. It offers many features including the ability to display nested or child rows with additional information about the parent rows. By following the steps outlined in this article, we learned how to display child row information using jQuery DataTables plugin.
367 Views
