How do I check all checkboxes?

Rhendar

I have a basic datatable where each row has a checkbox in the first column. I then added a checkbox elsewhere on my page and would like that additional checkbox to function as the "Select All" box. When the "Select All" checkbox is selected all checkboxes in their respective rows should be selected. To achieve this I added a class to each row checkbox which for this example we will call "MyCheckboxClass". When the "Select All" checkbox is checked an event listener is fired which then gets all elements by class name using the class name "MyCheckboxClass", loops through each element found, and checks the corresponding box. The problem is this is only working on the current table page. It does not work on any other table page. I've been trying for hours and it looks like the other elements simply do NOT exist on the DOM until their page is called.

This project is an MVC 5 project where the data presented in the table is gathered on the server-side and then passed into the ViewBag where a loop is done on the HTML page to create each table row. So the data is all there on the client-side when the datatable is rendered. Why does the datatable appear to be removing elements from the DOM? Where are they going? Is there a way to disable this so I can get the functionality required?

kthorngren

Why does the datatable appear to be removing elements from the DOM?

That is the way Datatables works. It has a data cache in the client for all the data but only places in the DOM the rows being displayed. You can use either draw or drawCallabck to get the checked state of the Select All checkbox then if its checked check all the checkboxes on the page.

If this doesn't help please provide a test case showing what you currently have so we can help with a solution.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Rhendar

So that appears to be working but isn't that just cosmetic? Down the road I plan on having a submit button to gather all the checked boxes and their corresponding row data. Isn't that only going to find 10 at a time since the rest are in that cache? Is there a way for me to access that cache?

kthorngren

Good point. A better way is to use cell().node() and iterate over all the cells in the checkbox column using cells().every(). Here is an example that shows both Select All and getting the checked rows:
http://live.datatables.net/mutavegi/6/edit

Kevin

Rhendar

Kevin,

That worked beautifully. You are my hero. Thank you so very much!

Rhendar

I have another question related to the answer provided. Is it possible to give the checkboxes a unique ID?

defaultContent: '<input type="checkbox" name="chkbx">',

kthorngren

You can use columns.render instead. Here is an example with buttons in the rows that are assigned an ID based on the row number:
http://live.datatables.net/qemodapi/1/edit

Uses the meta parameter of columns.render to get the row number. Or you can base it on another data point in the row data. Same idea will work for checkboxes.

Kevin