checks all checkboxes in the DataTable including hidden rows
10,715
Try:
$("#selectallboxes").click(function () {
var selected = new Array();
$(otable.fnGetNodes()).find(':checkbox').each(function () {
$this = $(this);
$this.attr('checked', 'checked');
selected.push($this.val());
});
// convert to a string
var mystring = selected.join();
alert(mystring);
});
.length
gives you the length of the array. I've used join()
to join the array into a string. DataTable's .fnGetNodes()
gives you all the rows in the table including hidden ones.
Related videos on Youtube
Author by
Farhad
Updated on June 16, 2022Comments
-
Farhad over 1 year
I'm trying to make a function that checks all checkboxes in the DataTable, including hidden rows. Here's the html code for the "checkbox" column:
<div class="usersTable" id="userTable"> <table cellpadding="0" cellspacing="0" id="customersList" > <thead> <tr> <th><input type="checkbox" name="selectall" id="selectall" class="selectall"/></th> <th width="200">val1</th> <th width="80px">val2</th> <th width="70px">val3</th> <th width="450">val4</th> <th width="60px">val5</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div>
Submit button:
<input type='button' value='select all' id='selectallboxes' name='selectallboxes' />
And the JQuery code that doesn't work:
$(function () { otable = $('#customersList').dataTable({ "bJQueryUI": true, "sPaginationType": "full_numbers", "aLengthMenu" : [ [10,20,50,100,1000], [10,20,50,100,1000] ], "iDisplayLength": 100, "bProcessing": true, "bServerSide": true, "aaSorting":[], "iDisplayStart": 0, "sAjaxSource": "filename", .... $("#selectallboxes").click ( function () { alert(dt.fnGetNodes().length + ' is total number') var selected = new Array(); $('input', dt.fnGetNodes()).each( function() { $(this).attr('checked','checked'); selected.push($(this).val()); } ); // convert to a string var mystring = selected.length; alert(mystring); })
-
Farhad over 10 yearsit doesn't work unfortunately. The result is the same with past.
-
David Barker over 10 yearsjust spotted, you're putting the <input> in a <th> tag, they would need to be in <td>'s for ``fnGetNodes()` to pick them up
-
Farhad over 10 yearsI added this line to the frist line of my function in order to getting better result: alert(otable.fnGetNodes().length + ' is total row number') but this return the number of elements on the first page!
-
David Barker over 10 yearsActually, it returns the total number of nodes in the
<tbody>
not just the nodes displayed, that's what that function does, you can run a check for$(this).is(':visible')
to see if it is displayed or not. -
Farhad over 10 yearsI guess because "bServerSide" is true,I have to handle it on server side. I think in this case all data doesn't fetch at first.
-
pkachhia over 10 years+1 for your this line of code $(otable.fnGetNodes()).find(':checkbox').each, you save my day
-
James McCormack over 9 yearsSince DataTables v1.10,
$(otable.fnGetNodes())
should now be:$(otable.rows().nodes())