jquery - 带有 TableTools fnSelect() 的 DataTables 在行选择时触发两次

Question

我试图通过(DataTable)TableTools 按钮的 fnSelect() 捕获行选择(对行数据进行一些预处理)，即。用户选择一行，对行数据进行一些操作；然后用户可以单击该按钮。

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

我已经使用各种版本的 jQuery 进行了尝试，但总是得到相同的结果。

我的表的定义如下:

$('#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展示这个问题/行为。

如果有人能够阐明我做错了什么(在我大喊“bug”之前!!)，我将不胜感激

非常感谢。

Answer 1

您可以将 fnSelect 事件视为“选择状态更改时”。也就是说，大多数时候*它确实会触发两次:第一次是针对先前选择的行(选择出)，第二次是针对您刚刚选择的行(选择入)。

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

*唯一的异常(exception)是当您单击当前选定的行时。然后 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());
    }
} );

行选择API解释:http://www.datatables.net/examples/api/select_single_row.html