引言
datatables.js是一款功能强大的JavaScript插件,它允许您创建交互式表格,提供排序、搜索、分页等功能。在本文中,我们将深入探讨如何使用datatables.js实现表格数据的展开与收缩功能,使您的表格更加灵活和用户友好。
基础设置
在开始之前,确保您已经引入了datatables.js库。以下是一个基本的HTML和JavaScript代码示例,用于初始化一个datatables表格:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datatables.js 展开与收缩示例</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<!-- 更多数据行 -->
</tbody>
</table>
<script>
$(document).ready(function() {
$('#example').DataTable();
});
</script>
</body>
</html>
实现展开与收缩
要实现表格数据的展开与收缩,我们需要使用datatables.js的扩展插件。以下是一个简单的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
<script src="https://cdn.datatables.net/plug-ins/1.10.21/api/dataTables.rowReorder.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.21/api/dataTables.colReorder.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.21/api/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.21/api/dataTables.expand.min.js"></script>
</head>
<!-- ... -->
<script>
$(document).ready(function() {
var table = $('#example').DataTable({
// ... 其他配置 ...
initComplete: function(settings, json) {
this.api().columns().every(function() {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo($(column.footer()).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
});
}
});
// 初始化展开与收缩功能
$('#example').DataTable().rows().addClass('expandable').on('click', 'td', function() {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// 如果行已经展开,则收缩
row.child.hide();
tr.removeClass('expanded');
} else {
// 如果行未展开,则展开
row.child(format(row.data())).show();
tr.addClass('expanded');
}
});
});
</script>
</body>
</html>
在上面的代码中,我们使用了datatables的rowReorder、colReorder、select和expand插件来实现展开与收缩功能。首先,我们为所有行添加了expandable类,然后为每个单元格添加了点击事件。当点击单元格时,我们检查对应的行是否已经展开,如果已经展开,则收缩;如果未展开,则展开。
总结
通过使用datatables.js及其扩展插件,您可以轻松实现表格数据的展开与收缩功能。这不仅提高了表格的交互性,还使数据更加易于浏览和理解。希望本文能帮助您在项目中实现这一功能。
