在同一页面上有多个表格时,可以使用 DataTables 的 TableTools 插件来实现对每个表格的操作。以下是一些关于 DataTables 和 TableTools 的简要介绍和示例代码:
DataTables 是一个用于 jQuery 的高度定制化的数据表格插件,它允许开发者轻松地将数据以表格的形式展示出来,并提供了丰富的功能和选项,例如分页、排序、搜索、固定列等。
TableTools 是 DataTables 的一个扩展插件,它提供了一些额外的工具,例如导出表格数据为 CSV、Excel、PDF 等格式,以及打印表格等。
以下是一个使用 DataTables 和 TableTools 的示例代码:
<!DOCTYPE html>
<html>
<head>
<title>DataTables with TableTools</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/tabletools/2.2.5/css/dataTables.tableTools.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/tabletools/2.2.5/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 初始化第一个表格
$('#table1').DataTable({
dom: 'T<"clear">lfrtip',
tableTools: {
"sSwfPath": "https://cdn.datatables.net/tabletools/2.2.5/swf/copy_csv_xls_pdf.swf"
}
});
// 初始化第二个表格
$('#table2').DataTable({
dom: 'T<"clear">lfrtip',
tableTools: {
"sSwfPath": "https://cdn.datatables.net/tabletools/2.2.5/swf/copy_csv_xls_pdf.swf"
}
});
});
</script>
</head>
<body>
<table id="table1" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
</table>
<table id="table2" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
</table>
</body>
</html>
在上面的示例代码中,我们使用了 DataTables 和 TableTools 插件来初始化两个表格,并且为每个表格添加了导出数据的工具栏。
需要注意的是,由于 TableTools 插件已经不再维护,因此需要使用一个替代的插件来实现类似的功能,例如 Buttons 插件。
领取专属 10元无门槛券
手把手带您无忧上云