How to check every checkboxes in a jquery datatable?

Question

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

Alex M · Accepted Answer · 2012-01-16 14:43:33Z

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

answered Jan 16, 2012 at 14:43

Alex M

3,5232 gold badges22 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Waddington · Accepted Answer · 2015-01-29 10:57:10Z

1

This is my solution (DataTables1.9.4):

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

edited Jan 29, 2015 at 10:57

James Waddington

2,9252 gold badges18 silver badges24 bronze badges

answered Jan 29, 2015 at 10:38

bill

638 bronze badges

1 Comment

bill Over a year ago

The first line of the code is to get all the nodes instance which is the prarent nodes including the checkboxs; So we can get the all checkboxes by using the jQuery.

user1930790 · Accepted Answer · 2012-12-28 15:50:06Z

0

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

answered Dec 28, 2012 at 15:50

user1930790

11 bronze badge

Comments

sara191186 · Accepted Answer · 2014-10-04 12:53:53Z

0

$(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");
             }
});

edited Oct 4, 2014 at 12:53

answered Oct 4, 2014 at 12:39

sara191186

353 bronze badges

Collectives™ on Stack Overflow

How to check every checkboxes in a jquery datatable?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related