HTML

Question

当用户单击一行中的空白区域时，我的表已定义选择和取消选择处理程序正常工作。但是，如果用户单击某些文本（表创建中定义的span标记），则永远不会触发该事件。

为了解决这个问题，我尝试设置一个行单击事件处理程序，它检查该行是否具有“已选择”的CSS属性，然后在该行上手动触发相应的de / selection事件。单击文本时解决方案效果很好，但遗憾的是，当单击一行中的空白时，解决方案效果不佳，因为两个事件都被触发并且行为不是预期的。

处理此事的任何想法？

/*
*/
function createTable(){

    if(table != null){//Si la tabla ya existe: eliminamos filas y la destruimos.
        table.destroy();
        $('#'+tableID).empty();
    }

    table = $('#' + tableID).DataTable({
        "dom": 'Bfrtip',
        "buttons":  ['selectAll','selectNone'],
        "columnDefs": [{
            "render": function(data, type, row){
                return '<span class="label bg-info">' + data + '</span>';
            },
            "targets": 1
        },
        {
            "render": function(data, type, row){
                return '<span class="column1">' + data + '</span>';
            },
            "targets": 0
        }],
        "select": {style: 'multi'},
        "data": rows,
        "columns": columns,
        "destroy": true
    });

    table.off('select').on('select', handlerRowsSelection);
    table.off('deselect').on('deselect', handlerRowsDeselection);
    //table.off('click').on( 'click', 'tr', handlerRowClickEvent);
}

/*
*/
function handlerRowClickEvent(){
    if ($(this).hasClass('selected') ) {
        table.row(this).deselect();
    }
    else {
        table.row(this).select();
    }
}

/*
*/
function handlerRowsSelection(e, dt, type, indexes){
    if(type=="row"){
        //DOING SOMETHING
    }
}

/*
*/
function handlerRowsDeselection(e, dt, type, indexes){
    if(type=="row"){
        //DOING SOMETHING
    }
}

Answer 1

这是关于codepen的一个基本示例，不确定为什么你的代码不正常，因为它似乎是正确的。尝试一次改变代码，以获得你所拥有的东西，这可能有助于找出问题的原因。

http://codepen.io/carltondickson/pen/VaQzyM

HTML

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
  </tbody>
</table>

CSS

https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css

JS

https://code.jquery.com/jquery-1.12.0.min.js

https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js

https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js

$(document).ready(function() {
    var t = $('#example').DataTable( {
        select: {style: 'multi'}
    } );
    t.off("select").on( "select", function( e, dt, type, indexes ) {
        console.log( "Selected" );
        console.log( e, dt, type, indexes );
    } );
    t.off("deselect").on( "deselect", function( e, dt, type, indexes ) {
        console.log( "Deselected" );
        console.log( e, dt, type, indexes );
    } );
} );

单击行数据时不会触发选择事件

1 个答案:

HTML

CSS

JS