Selection Event is Not Trigger When Clicking Over Row Data

Question

My table has defined selection and deselection handlers working fine when the user click over blank space in a row. However, if the user clicks over some text (span tags defined in the table creation), the event is never triggered.

To fix that, I tried to set a row click event handler, which checks if the row has the CSS property 'selected' or not and then trigger manually the corresponding de/selection event over the row. The solution works well when clicking over the text, but unfortunately not when clicking over blank space in a row, because both events are fired and the behaviour is not the expected.

Any idea for handling this?

/*
*/
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

In addition you can check if row is selected and get data:

t.off("select").on( "select", function( e, dt, type, indexes ) {
    console.log( "Selected" );
    console.log( e, dt, type, indexes );
    if ( type === 'row' ) {
        var data = t.rows( indexes ).data().pluck( 'id' );
        console.dir(data);
        // do something with data
    }
} );

Answer 2

Here's a basic example on codepen, not sure why yours doesn't work as it appears to be correct. Try altering the codepen one thing at a time to get towards what you have and that might help identify the cause of the issue.

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 );
    } );
} );