javascript - jquery datatable - 通过单击表页脚单元格获取列名称

Question

当用户单击 jquery 数据表的页脚单元格时，我尝试获取列名称。

我尝试遵循此操作:https://datatables.net/forums/discussion/24593/retreive-column-idx-when-clicking-on-header

并且，https://datatables.net/reference/type/column-selector

但是，我使用以下代码得到“未定义”，

    $('#myTable').on( 'click', 'tfoot th', function () {
        var index = table.column( this ).index(); //index is returned as undefined
   } );

如有任何建议，我们将不胜感激。

Answer 1

原因

只有当您使用 header th 节点或表主体 td 节点时才能选择列，这就是它不起作用的原因。

解决方案

尝试下面的代码来获取实际的列索引。

修饰符:visible之所以需要，是因为 $(this).index() 使用实际的 DOM 元素进行操作，并返回当前可见列中第 th 节点的索引。然而，当使用各种扩展时，jQuery DataTables 可能会从 DOM 中删除列，例如 Responsive , Buttons - Column visibility等，实际的列索引可能与 DOM 中的列索引不同。

$('#example').on( 'click', 'tfoot th', function () { 
    var index = table.column($(this).index() + ':visible').index();
});

参见this example用于代码和演示。