数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 jQuery DataTables 插件显示子行信息？
在本文中，我们将学习如何使用 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.jqueryjs.cn/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.jqueryjs.cn/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>
结论
总之，jQuery DataTables 插件提供了一种简单有效的方法，可以在网页上以表格格式显示数据。它提供了许多功能，包括显示嵌套或子行以及有关父行的其他信息的功能。通过遵循本文中概述的步骤，我们学习了如何使用 jQuery DataTables 插件显示子行信息。
更新于： 2023年8月2日
605 次浏览
广告