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来证明这个问题/行为。

如果有人能说清楚我做错了什么（在我喊'虫'之前），我将不胜感激！!!

非常感谢。

Answer 1

您可以在选择状态更改时考虑fnSelect事件＆＃39;。也就是说，大多数情况下*它确实会两次触发：第一次用于之前选择的行（选择输出），第二次用于您刚刚选择的行（选择输入）。

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

*唯一的例外是当您单击当前选定的行时。然后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

带有TableTools的DataTables fnSelect（）在行选择时触发两次

1 个答案: