CODEWITHSUNDEEP
javascriptjquerycheckboxdatatable
Alexis
Alexis

Reputation: 16829

How to check every checkboxes in a jquery datatable?

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

Upvotes: 2

Views: 11772

Answers (4)

bill
bill

Reputation: 63

This is my solution (DataTables1.9.4):

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

Upvotes: 1

sara191186
sara191186

Reputation: 35

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

Upvotes: 0

user1930790
user1930790

Reputation: 1

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

Upvotes: 0

Alex M
Alex M

Reputation: 3513

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

Upvotes: 1

Related Questions