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