Checkbox behaviour in a paginated table

iSabier

Hi everyone,

My thanks to Allan for terrific plug-in.

I have a typical problem I encountered with regards to checking and unchecking a checkbox in a paginated table.

I'm basically rendering a table using "fnRowCallback". I'm rendering a checkbox in one of the columns. Something like this...

[code]"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
$('td:eq(0)', nRow).html("")
}
[/code]

The table is paginated as it has lots of rows. I'm doing some scripting manipulations with the checkboxes before I submit.

1. The problem is that the state of the checkboxes is not persistent when I paginate. That is, if I check a box and then return to that screen, they are unchecked.

2. Furthermore, ONLY the boxes in the first page seem to respond to the "bind" function I wrote while the hidden boxes don't respond. That is ony if we don't paginate to other pages. If I paginated to the second page, the first page boxes also get unbinded.


I am really caught in a catch-22 here. I can't seem to resolve it. I tried "live", "bind" etc but to no avail.

Can someone please post some suggestions? I'd be much obliged.

Thanks!
~Sabier

iSabier

Anyone? I'd be grateful for any kind of advice.

fbas

for problem #2, use jQuery's live() function rather than bind(). this will perform bind on elements that were become available throughout the lifetime of your script. http://api.jquery.com/live/

Allan has put together an example page for .live(): http://datatables.net/release-datatables/examples/advanced_init/events_live.html

for problem #1, I assume you aren't using server-side controls. If you're just using client side data, you might wish to create some arrays that keep state of checkboxes, indexed by the row number or id and the column number and in your fnRender or fnRowCallback, when you render the checkbox, check the array for state value.

GregP

fbas has it right. You should use either .live() or .delegate() for your event binding.

You could use an array mapping as he suggests, or develop a cookie system and keep track of checkbox states that way. Or, as fbas implies, switch to tracking state on the server side instead?

iSabier

Thanks for your suggestions.

I am not using server-side controls.

Problem #2 is solvable. I can capture the checkbox event using "live" as you rightly mentioned. I can also create an array of all checkboxes indexed as they would appear in the table.

The more important problem is #1. Maintaining the "checked" status of a checkbox, say in page 1, when I paginate to page 2 is troublesome. By the time I return to page 1, it's unchecked. This is something I can't seem to solve. "fnGetNodes()", "fnGetHiddenNodes()" etc just don't work on them either.

I'm kinda perplexed as to how I can keep the state persistent by using an array as GregP mentioned. If any of you can suggest how I can maintain the state of the checkboxes to remain "checked" across multiple pages, my solution would be nearly complete.

Thanks again for your help.

GregP

Sorry for the long time between replies. I didn't notice this one was still waiting for a response!

If the entire page is re-loaded, your only two choices are a) persist a server-side variable (you could use session variables for this if your application is session-based or if you want to switch to it being session-based), or b) store as a cookie.

If you decide to store as a cookie, you can set the cookie either with your server-side language (it is sent in the response header) or you can use a jQuery plugin (there's a jquery.cookie.js that does the basics just fine!). The format of the cookie is really whatever you want it to be, and ditto for reading it back and using it. It could just be a string separated by commas or a pipe, and use .split to break it into an array.

Stephan

If i got you right your problem you need to keep track of checked checkboxes in one table during pagination (not across different webpages). Have a look at: http://datatables.net/forums/discussion/comment/3315#Comment_3315
It is an example of row selection with serverside-processing. You could use a javascript array to 'save' checked rows as shown in the example and mentioned above.
In fnRowCallback you can generate checked or unchecked boxes for a row depending on this array and you have to alter your function for checkbox.click, to delete or save a row (row_id) in this array. You can just extract the example if your rowID (or any unique identifier) is in aData[0].

Best regards!

pranaysoni

on checkbox change select a row add a css class to this row and check this class in fnrow callback

if (nRow).hasClass('ChkRow_Selected')) {
$(nRow).find(".ChkWatch").prop("checked", true);
}