jQuery dataTables 标题单击自定义事件

Question

如何为数据表中的某些表标题添加自定义单击事件。 我已经从除第一列之外的每一列中删除了默认排序事件。 所以我想将自定义事件添加到这些列中。 我想找到用户单击的列的索引。

到目前为止我尝试过的是这个。 但我不知道如何找到用户单击的列的索引。

var table = $('#example').dataTable( {
    "data": data_set,
    "columns": column_titles,
    "columnDefs": column_defs
} );

$('#example thead').on( 'click', 'th', function () {         
    alert( 'Column clicked on: ');
} );

PS 我找到了这篇文章https://datatables.net/reference/api/column().header()并关注了它。 但是当我调用 table.cell() 时，它给出了一个错误。

$('#example tbody').on( 'click', 'td', function () {
    var idx = table.cell( this ).index().column;
    var title = table.column( idx ).header();

    alert( 'Column title clicked on: '+$(title).html() );
 } );

Answer 1

var table = $(`#mytable`).DataTable({
    ...
});

var headers = table.columns().header().toArray();

$(headers).on('click', function () {
    // do something
});

Answer 2

http://jsfiddle.net/zwkggt7r/3/

尝试一下

$(document).ready(function() {
    var table = $('#example').dataTable();
    table.on('click', 'th', function() {
        var info = table.fnSettings().aaSorting;
        var idx = info[0][0];
        alert(idx);
    });
});

Answer 3

我发现的代码片段是正确的，除了一小部分。

通过使用下面的代码，它可以正确地创建数据表。

var table = $('#example').dataTable( {
    "data": data_set,
    "columns": column_titles,
    "columnDefs": column_defs
} );

但它没有正确选择表格。 所以稍后当我尝试访问表对象时，它没有方法“单元格”。

代码应更正为

var table = $('#example').DataTable( {...

所以现在表格有“单元格”方法。

所以最终的代码如下。

var table = $('#example').DataTable( {
    "data": data_set,
    "columns": column_titles,
    "columnDefs": column_defs
} );

$("#example").find("thead").on('click', 'th', function(){
    var col_idx =  table.column(this).index();
    console.log("colId = " + col_idx);
});

Answer 4

单击这样的标题时，您将获得索引：

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

这也适用于隐藏列、重新排序的列等等。

小提琴 - > http://jsfiddle.net/1kjooq9w/

Answer 5

自从我使用 DataTables 已经很长时间了，但我认为您可以使用cell().index()来实现它。 查看文档： https://datatables.net/reference/api/cell().index()

$('#example thead').on('click', 'th', function () {         
    alert( 'Column clicked on: ' + table.cell(this).index().column);
});

Answer 6

您可以使用表格的order方法轻松做到这一点。 我的技术效果很好。

我们需要在这里做两件事。

• 获取当前列索引
• 单击图标对特定列应用升序或降序操作

在这里，让我们假设我们有一个按钮或链接，单击可以绑定到该按钮或链接。

$(".arrow-sort-ascending").bind("click", {
 // Sorting should happen here
}

获取列索引

我使用通用方法来获取列名。 如果您使用的是 Jquery，我们可以使用它获取列索引。

myColumn = $(parent).prevAll().length

其中parent应该是特定列的第 th 。

应用升序或降序

 // ascending
 myTable.order([myColumn, "asc"]).draw()

所以如果我们把代码放在一个单独的部分，它看起来像这样。

table = myTable // This is datatable you initialized

$(".arrow-sort-ascending").bind("click", {table: table}, function(event){
    parent = $(event.target).parent()
    myIndex = $(parent).prevAll().length;
    table.order([myIndex, "asc"]).draw()
}

所以每当我们点击箭头图标时，它都会对点击的列进行排序。