在jQuery DataTables中选择列

Question

在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访问该列中的数据(例如,在该列之后添加另一列)选中列或删除所选列并重新加载表,计算列中数据的统计信息等.？)

Answer 1

使用具有选择列能力的选择扩展。

超文本标记语言

<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();      
   }
});

请参阅此示例以获取代码和演示。

请参阅jQuery DataTables：如何选择列以获取更多信息和示例。