Selecting a checkbox and not sorting the dataTables

Question

I’m using the dataTables and in one of the columns I placed a input:checkbox for the user to be able to mark all columns or uncheck, remembering that in the columns I have to sort, and in this column I also have this, because I need to know which items are already marked or not. So far everything is working.

What I’m not sure how to do is that when the user clicks on checkbox do not sort, only do this sort when you click on the column itself. Today, when he clicks to mark or uncheck already makes the ordering, and that can’t happen.

The snippet I create of html is as follows::

<table id="datatables">
    <thead>
        <th>
            <tr>Tema</tr>
            <tr>Monitoramento</tr>
            <tr><input type="checkbox"></tr>
        </th>
    </thead>
    <tbody>
        <tr>
            <td>Alimentos</td>
            <td>monitoramento alimentos 2</td>
            <td><input type="checkbox"></td>
        </tr>
        <tr>
            <td>Alimentos</td>
            <td>monitoramento alimentos 3</td>
            <td><input type="checkbox"></td>
        </tr>
    </tbody>
</table>

Answer 1

Marcelo, I imagine the problem here is that the event click propagates to the parent element of input, to which dataTables ties an Event Listener to re-sort. So I think the important thing here is to use the .stopPropagation()

$('table th input[type=checkbox]').on('click', function (e) {
    e.stopPropagation();
});

Example

Note that your table syntax is incorrect. The descendant of <thead> is <tr> and then <th> not the other way around.

---

Edit:

In the case of anti-user browsers test like this:

$(document).ready(function () {
    $('#datatables').dataTable();
    $('table th input[type=checkbox]').on('click', function (event) {
        event.stopPropagation ? event.stopPropagation() : event.returnValue = false;
    });
});

Example

Answer 2

Datatables itself has solution for this, using column definitions.

I do like this:

     "aoColumnDefs": [
  { "bSearchable": false, "aTargets": [ 7 ] },

This has to be done in the javascript that calls the datatables.

link to parameter documentation. http://www.datatables.net/ref#bSearchable