I have a table with checkboxes in the first column. I use the jQuery DataTable plugin display my table.

I made 2 links to select/unselect every checkboxes. Here's the one to select all :

<a href="" name="CheckAll" onClick="checkAll(document.email_list_form_inviter.getElementsByClassName(\'email_checkbox\'), event)" >Select all</a>

And the javascript :

function checkAll(field, event) {
    event.preventDefault();
    for (i = 0; i < field.length; i++)
        field[i].checked = true ;

    return false;
}

But the datatable enables pagination and my function select only the visible checkboxes, not those of the other pages. How can do to select every checkboxes in my data table?

Solution :

Ok I did this with fnGetNodes, thank you amccausl!

$("a[name='CheckAll']").click(function(event) {
        event.preventDefault();
        var nodes = datatable.fnGetNodes( );
        $('.email_checkbox', nodes).attr("checked", "checked");
    });

I have a table with checkboxes in the first column. I use the jQuery DataTable plugin display my table.

I made 2 links to select/unselect every checkboxes. Here's the one to select all :

<a href="" name="CheckAll" onClick="checkAll(document.email_list_form_inviter.getElementsByClassName(\'email_checkbox\'), event)" >Select all</a>

And the javascript :

function checkAll(field, event) {
    event.preventDefault();
    for (i = 0; i < field.length; i++)
        field[i].checked = true ;

    return false;
}

But the datatable enables pagination and my function select only the visible checkboxes, not those of the other pages. How can do to select every checkboxes in my data table?

Solution :

Ok I did this with fnGetNodes, thank you amccausl!

$("a[name='CheckAll']").click(function(event) {
        event.preventDefault();
        var nodes = datatable.fnGetNodes( );
        $('.email_checkbox', nodes).attr("checked", "checked");
    });

• javascript
• jquery
• checkbox
• datatable

Share Improve this question Follow edited Jan 29, 2015 at 11:51 Alex Kulinkovich 4,7881515 gold badges4949 silver badges5454 bronze badges asked Jan 16, 2012 at 14:40 AlexisAlexis 16.9k1717 gold badges6464 silver badges110110 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

You can use fnGetNodes to grab all the nodes you need, instead of the getElementsByClassName.

You should also be using jquery.click() event instead of defining an onClick yourself

This is my solution (DataTables1.9.4):

var nodes = $('#listContainer').DataTable().column(0).nodes();
    $(':checked', nodes).each(function (index) {
        console.log($(this).text())
    })

Excuse me, my code is wrong :

The dynamic checkbox

return '<input type="checkbox" id="email_checkbox" name="email_checkbox"  />';

The link

<a href="" name="CheckAll" id="CheckAll">seleccionar todos</a>

the name´s table:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">

and the code

$(document).ready(function() {
$("a[name='CheckAll']").click(function(event) {
                event.preventDefault();
                var nodes =  $('#example').fnGetNodes( );
                $('.email_checkbox', nodes).attr("checked", "checked");
} );

$(document).ready(function() {
$(".checkall").click(function(event) {
                event.preventDefault();
                var oTable = $('#example').dataTable();
                var nNodes = oTable.fnGetNodes();
                $email_box=$('.email_checkbox',nNodes);
                if($email_box.attr("checked")=="checked"){
                  $email_box.removeAttr("checked");
                  $(".checkall").text("Check all");
                }
               else{
                 $email_box.attr("checked", "checked");
                 $(".checkall").text("Uncheck all");
             }
});