如何使用 jQuery DataTables 插件显示子行信息?
jqueryweb developmentfront end technology
在本文中，我们将学习如何使用 jQuery DataTables 插件显示子行信息。我们还将提供一些 HTML 代码示例来说明此功能的用法。
jQuery DataTables 是一款功能强大的插件，它提供了一种在网页上显示表格数据的简便方法。它具有分页、排序、搜索等功能。它还提供了 DataTables 插件，使我们能够显示子行信息，从而显示与每行相关的附加数据。
现在，让我们借助一些示例来了解该功能。
示例 1
在本例中，我们将创建一个简单的 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>
<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>
示例 2
在本例中，我们将在每一行中添加一个带有"details-control"类的按钮。点击按钮时，它将使用 format 函数将内联 HTML 内容显示为子行。子行将包含相应员工的更多详细信息。
文件名: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()) {
// 此行已打开 - 关闭
row.child.hide();
tr.removeClass('shown');
} else {
// 打开此行
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>
结论
总而言之，jQuery DataTables 插件提供了一种简单高效的方法来在网页上以表格形式显示数据。它提供许多功能，包括显示嵌套行或子行，并附加有关父行的附加信息。通过遵循本文概述的步骤，我们学习了如何使用 jQuery DataTables 插件显示子行信息。
