Can only access 90 IDs in HTML for Table.

jtaylorme

Can't find any reference to this type of problem here or by googling (could just be asking the wrong question of course) so thought I would ask and maybe the third time will be the charm...can't figure out where my posts go to since they don't ever appear anywhere that I can find...

Everything works fine with my table except when I loop through every row and then reference a checkbox id I created for every row based on an example from this site. I check to see if they are checked or not. Works great until I exceed 90 rows. If at the top of the grid when starting the check I can see the first 90 and then my getElementByID() call fails because the ID doesn't exist. If I am displaying the last row it fails at the very beginning of the loop and continues until I get to the last 90 rows. If in the middle I can see the middle 90 rows. If I "Inspect" the elements in the browser the 90 rows are all that show. The "every" row loop works fine and I see the data in the all the rows as I loop through them. Just the underlying HTML is missing for all but the 90 rows closest to the one that is being displayed. Is this expected behavior? Any way to overcome this behavior? I have tried scrolling as I loop but that doesn't help and nothing else seems to help either. Can't post a link because the site requires credentials and posting such things to a public site doesn't seem wise. Thanks for any help.

allan

Hi,

If you are using document.getElementByID to try and get an element which is in some why hidden by DataTables (filtering, paging, column hiding, etc) then yes, this would fail since DataTables will actively remove from the document the rows and cells that it doesn't need (for performance and compatibility reasons).

What you need to do is use rows().nodes() to get all tr elements that have been generated, regardless of if they are in the document or not. For example you could do:

var checkboxes = $('input[type=checkbox]', table.rows().nodes());

Your paging is presumably set to 90 rows at a time, which is why this would be happening (also I'm assuming you aren't using server-side processing?).

What is it specifically you are looking to do with them?

Thanks,
Allan

jtaylorme

Needing to check/uncheck boxes for an entire [long] list. I did figure out a solution using the following in an "every" loop...which I think is along the lines of what you have suggested.

var tr = table.row(this).node();
tr.getElementsByTagName("INPUT")[0].checked = true;

I purchased the "edit" plugin as I decided I would need it to solve the problem as all the help I read seemed to indicate I would but can't get past the "$.fn.dataTable.Editor is not a constructor" yet but solved the problem without it as noted above. Hoping to still find a use for the edit plugin once I get time to work around the error.

Thanks for solving my posting problem though so I can get timely help in the future.

Jim

allan

Hi Jim,

The simplest way to check all checkboxes would be:

$('input[type=checkbox]', table.rows().nodes()).prop( 'checked', true );

can't get past the "$.fn.dataTable.Editor is not a constructor"

Sounds like Editor's Javascript might not be getting loaded? Can you link to the page so I can take a look?

Allan