Select a checkbox and do not sort the dataTables

Question

Select a checkbox and do not sort the dataTables

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

I'm using dataTables and in one of the columns I've placed a input:checkbox so that the user can mark all columns or unmark, remembering that in the columns I have how to do the ordering, and in that column I also have this, since I must have to know which items are already or not marked. So far so good.

What I'm not sure how to do is that when the user clicks checkbox do not sort, only do this sort when clicking the column itself. Today, when he clicks to check or uncheck it already does the ordering, and that can not happen.

TheexcerptIcreatefromhtmlisasfollows:

<tableid="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>

jquery jquery-datatables

asked by anonymous 12.03.2014 / 16:02

2 answers

Namespaces for animations in jQuery Transparent background in java

score 2 · Answer 1

Marcelo, I imagine the problem here is that the click event propagates to the parent element of input , to which the dataTables binds an event listener to do the re-sort. So I think the important thing here is to use .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 browsers antingos 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

score 2 · Answer 2

The datatables themselves have a workaround for this by using the column definitions.

I do this:

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

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

link to the documentation of the parameter. link