淘先锋技术网

首页 1 2 3 4 5 6 7

JQuery DataTables是一个非常强大的数据表格插件,可以让我们快速、方便地创建一个美观且交互性强的表格。在使用 DataTables 的时候,经常需要选中多个行,这时候我们可以使用全选功能。

使用 DataTables 实现全选功能非常容易,只需要设置表头的 checkbox 即可实现。以下是一个示例代码:

<table id="example">
<thead>
<tr>
<th><input type="checkbox" id="select-all"></th>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>John</td>
<td>New York</td>
<td>123-456-789</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>David</td>
<td>Los Angeles</td>
<td>987-654-321</td>
</tr>
</tbody>
</table>
<script>
$("#select-all").click(function(){
$('input[type="checkbox"]').not(this).prop('checked', this.checked);
});
</script>

通过将表头的 checkbox 与所有数据行的 checkbox 绑定,实现表格全选功能。这里使用了 jQuery 的 not() 方法来排除表头 checkbox,再进行全选操作。

以上就是使用 JQuery DataTables 实现表格全选功能的方法。如果需要更多的便捷功能,可以通过 DataTables 官方文档了解更多。