Question

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

到目前为止我尝试过的是这个。但我无法弄清楚如何找到用户点击列的索引。

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

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

P.S。我找到了这篇文章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

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 2

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

通过使用以下代码，它可以正确创建dataTable。

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

但它没有正确选择表格。所以稍后当我尝试访问表对象时，它没有方法＆＃34; cell＆＃34;。

代码应更正为

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

所以现在桌子上有＆＃34;格子＆＃34;方法

所以最终的代码如下所示。

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 3

点击这样的标题时会得到索引：

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

这适用于隐藏列，重新排序列等等。

小提琴 - ＆gt;的 http://jsfiddle.net/1kjooq9w/

Answer 4

自从我使用DataTables已经有很长一段时间了，但我认为你可以用cell().index()实现它。查看文档：{{3}}

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

Answer 5

您可以使用表格的订单方法轻松完成此操作。我的技术运作良好。

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

获取当前列索引
点击图标

在这里，我们假设我们有一个按钮或链接单击进行绑定。

$(".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()
}

因此，每当我们点击arrrow-up图标时，它会对点击的列进行排序。

Answer 6

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

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

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

jQuery dataTables标题单击自定义事件

6 个答案:

获取列索引

应用升序或降序