How do I track checkboxes that are not onscreen?

totallyplandom

Hi All,

I'm having a problem. Basically i'm incorporating Datatables in a submission FORM where I have a list of users to whom I wish to send an email. Although DT remembers the checkboxes when I "unfilter" the list to redisplay all items, if the list is in a filtered state (and I'm guessing paginated) it doesn't SUBMIT the values that aren't currently onscreen.

What am I missing?

Best.

isaacs2

I use an array for this. When a checkbox is clicked I set an array of the checked boxes and then pass that array to a hidden input field on the form. Every time a checkbox is clicked it resets the array to get the current checked boxes. On form submit I pass the hidden field instead of the datatable inputs. Here is a simplified version where SelIds is the id of the hidden input field.

[code]
$('#example input[type=checkbox]').live('click', function () {
var newIds = [];
$('#example input[type=checkbox]:checked').each(function() {
newIds.push( this.id );
});

$('#SelIds').val( newIds );
});
[/code]

totallyplandom

But doesn't this depend on knowledge of the existing checked boxes? If there is an existing "memory" I'd rather simply access that. How does it manage if I uncheck an item in the process?

isaacs2

[code]$('#example input[type=checkbox]:checked').each(function() {[/code]

That reads all the checked check boxes and then pushes them into an array. If you unchecked a box, when that function runs it skips that unchecked box. This is why I run the function on every checkbox click. It clears and then rebuilds the entire array using only the checked check boxes.

There may be a better way but this works for me.

isaacs2

I use scrolling not pagination, I just tested this on the fiddle and it does lose the previous checkboxes when filtered. Works fine with scroll enabled, not pagination though.

It could still be done by setting and comparing different arrays in different states... but as I said there is probably a better way.

isaacs2

Obviously its a slow day at work, lol. Here is way that works with pagination and filtering.

http://jsfiddle.net/isaacs2/C8qd7/

twentyfive

You can use fnGetNodes or fnGetHiddenNodes (Plug-ins > API) to grab the nodes which are not currently rendered (off-screen) then append these checkboxes as hidden inputs right before the form is submitted.

[code]
$('form').bind('submit', function(e) {

var rows = dataTable.fnGetNodes(),
inputs = [];

// Add the inputs which are not currently visible to the form
for ( var i = 0, len = rows.length; i < len; i++) {
var $fields = $(rows[i]).find('input[name]:hidden:checked');

$fields.each(function (idx, el) {
inputs.push('');
});
}

$(this).append( inputs.join('') );

});
[/code]

totallyplandom

Excellent Sirs! I absolutely appreciate your assist!


Best.