在Datatables API说明中,您可以切换列可见性
https://datatables.net/extensions/buttons/examples/column_visibility/columns.html：
- $(document).ready(function() {
- $('#example').DataTable( {
- dom: 'Bfrtip',buttons: [
- {
- extend: 'colvis',columns: ':not(:first-child)'
- }
- ]
- } );
- } );
但是有没有办法通过鼠标点击来选择一个列,就像选择一行一样 – 即让用户通过突出显示列来了解列的选择 – 并从javascript访问该列中的数据(例如,在列之后添加另一列)选中列或删除所选列并重新加载表,计算列中数据的统计信息等.？)
解决方法
使用选择扩展名,可以选择列.
HTML
- <table id="example" class="display" cellspacing="0" width="100%">
- <thead>
- <tr>
- <th>Name</th>
- <th>Position</th>
- <th>Office</th>
- <th>Age</th>
- <th>Start date</th>
- <th>Salary</th>
- </tr>
- <tr>
- <th><input type="checkBox"></th>
- <th><input type="checkBox"></th>
- <th><input type="checkBox"></th>
- <th><input type="checkBox"></th>
- <th><input type="checkBox"></th>
- <th><input type="checkBox"></th>
- </tr>
- </thead>
- <!-- skipped -->
- </table>
JavaScript的
- var table = $('#example').DataTable({
- 'orderCellsTop': true,'select': 'multi'
- });
- $('#example').on('change','thead input[type="checkBox"]',function(){
- var colIdx = $(this).closest('th').index();
- if(this.checked){
- table.column(colIdx).select();
- } else {
- table.column(colIdx).deselect();
- }
- });
有关代码和演示,请参见this example.
有关更多信息和示例,请参见jQuery DataTables: How to select columns.
