"Check All" button with pagination

wiggsfly

I have the following "Check All" function, however it only checks the first page with paginated data. Any suggestions?

this.checkAll = function(pageSize) {
var anSelected = oTable.fnGetNodes();
$(document).ready(function(){
for (var i = 0; i < pageSize; i++) {
$(anSelected[i]).addClass('row_selected');
}
});
}

allan

Hi wiggsfly,

Where is the "pageSize" variable coming from? What I think you can probably just in your "for" loop is:

[code]
for (var i = 0; i < anSelected.length; i++)
[/code]

The fnGetNodes() API function returns an array of all TR nodes in the table, so it's length will match what is currently available via paging.

Allan

wiggsfly

Thanks allan, I've used that technique as well however that selects all the records in the entire table and what I really need to do is select all the records I can see on the given page (assuming pagination). Any suggestions?

Thanks,
Chris

allan

Oh I see - sorry - from your original post I thought you could get the data from the first page, but not the full data. Okay, so what you could do then is one of two things:

1. Get the number of TR elements from the DOM and bypass DataTables for that little part. For example $('#example tbody tr').length would do).

2. Use the settings information to figure out how many records are displayed.

[code]
/* DataTables 1.4 */
var oSettings = oTable.fnSettings();
int iDisplay = oSettings._iDisplayEnd - oSettings._iDisplayStart;

/* DataTables 1.5 */
var oSettings = oTable.fnSettings();
int iDisplay = oSettings.fnDisplayEnd() - oSettings._iDisplayStart;
[/code]

Regards,
Allan

wiggsfly

Thank you. That's exactly what I was looking for.

Chris

sid

Hi Allan,
First of all, you have created a great plug-in.

I have 20 rows in my table sorted by the row number 1 - 20. The table is set to display 10 rows at a time. Therefore, I have two pages to click next and previous. The first page displays 1-10 and the second page displays 11-20. My check all code works great when the table is first displayed and even when the next and previous buttons are clicked.
Now I sort a column so that my first page is displaying rows 5 - 14. The check all code only selects the rows 5-10 instead of checking all of the displayed rows. Do you know of a work around to get this working right? I just cannot find anything in the forum and I'm a javascript newbie

[code]
var oSettings = myTable.fnSettings();
var start = oSettings._iDisplayStart;
var end = oSettings._iDisplayLength;
var counter = oSettings.fnDisplayEnd() - oSettings._iDisplayStart;
for ( var i = start; i < counter; i++) {
var node = $('input[name=selectedItems]', itemsMgmtTable.fnGetNodes(i));
node.attr('checked', element.checked);
}
[/code]

sid

This is what I ended up doing that worked for me:
[code]
var oSettings = itemsMgmtTable.fnSettings();
var start = oSettings._iDisplayStart;
var end = parseInt(oSettings.fnDisplayEnd());

for ( var i = start; i < end; i++) {
var nRow = oSettings.aoData[ oSettings.aiDisplay[i] ].nTr;
var chkNode = $('input[name=selectedItems]', nRow);
chkNode.attr('checked', element.checked);
}
[/code]

allan

Hi sid,

Good to hear you got it sorted. A possibly slightly shorter version:

[code]
/* For all row in the table */
$( "input[name=selectedItems]", itemsMgmtTable.fnGetNodes() ).attr('checked', element.checked);

/* For only visible row in the table */
$( "input[name=selectedItems]" ).attr('checked', element.checked);
[/code]
Warning - I've not actually tested this code - but I think it should work fine :-)

Regards,
Allan