DataTables with TableTools fnSelect() 在行 select 上触发两次

Question

我正在尝试通过 (DataTable) TableTools 按钮的 fnSelect() 捕获行选择（以对行数据进行一些预处理），即。用户选择一行，完成对行数据的一些操作；然后用户可以点击按钮。

问题是事件（即选择行）似乎触发了两次——console.log() 显然输出了两次...

而且我已经使用各种版本的 jQuery 进行了尝试，但结果始终相同。

我的table定义如下：

$('#example').DataTable( {
  dom: 'T<"clear">lfrtip',
  tableTools: {
    "sRowSelect": "single",
    "aButtons": [
      {
        sExtends:"text",
        sNewLine: "<br/>", 
        sButtonText: "edit",
        fnSelect: function(nButton, oConfig, nRow){

          // replicates the behaviour of the select_single button
          // ie disable button unless a row is selected
          var iSelected = this.fnGetSelected().length;
          if ( iSelected == 1 ) {
            $(nButton).removeClass( this.classes.buttons.disabled );
          } else {
            $(nButton).addClass( this.classes.buttons.disabled );
          }
          // "do something" is output twice.
          console.log("[edit button's fnSelect()] do something"); 
          // so this would be a problem...
          // row_data = this.fnGetSelectedData()[0]);
          // do some function(row_data){}
        },
      },
   ],
 }
});

我有一个 jsfiddle 来演示这个 problem/behaviour。

如果有人能指出我做错了什么（在我大喊大叫之前 'bug'!!）

，我将不胜感激

非常感谢。

Answer 1

您可以将 fnSelect 事件视为 'on select state change' 事件。也就是说，大多数时候*它确实触发了两次：第一次是针对先前 selected 的行（select out），第二次是针对您刚刚 select 的行ed (select in).

可以通过 .hasClass('selected') 条件轻松区分这两个事件。所以你的代码应该修改成这样：

"fnSelect": function ( nButton, oConfig, nRow ) {
    if ($(nRow).hasClass('selected')) {
      // Do something with the newly selected row.
      alert($(nRow).html());
    }
    else {
      // Do something with the previously selected row.
      alert($(nRow).html());
}

*唯一的例外是当您单击当前 selected 行时。然后 fnSelect 只触发一次。

另一种方法是使用 DataTables API:

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

$('#example tbody').on( 'click', 'tr', function () {
    if ( $(this).hasClass('selected') ) {
        // Do something in case the currently selected row has been clicked (that is 'de-selected').
        $(this).removeClass('selected');
        alert($(this).html());
    }
    else {
        // Do something in case a non-selected row has been clicked.
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
        alert($(this).html());
    }
} );

行 selection API 解释：http://www.datatables.net/examples/api/select_single_row.html

DataTables with TableTools fnSelect() 在行 select 上触发两次

DataTables with TableTools fnSelect() fires twice on row select

jquery

datatables

tabletools