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 官方文档了解更多。