Selecting hidden checkboxes with deferRender

ianchanning

I have created a JSBin for this, I have some extra code in there just to inject some checkboxes into the example data, but the rest is direct from https://datatables.net/extensions/select/examples/initialisation/deferRender.html

I'm using deferRender with AJAX loading of a table.

I have a checkbox on each row. I want to be able to check all checkboxes similar to https://datatables.net/forums/discussion/29168/check-all-rows-paginated-filtered-and-submit

The main problem of course is that deferRender is hiding all the checkboxes so

$("input:checkbox", table.rows({search:'applied'}).nodes()).length

Only returns the count of rows in the current page.

However I still need to be able to do a select all.

So how do I 'render' the rows automatically, whilst still keeping them hidden, so that they can have their checkboxes toggled?

This is the basic initialisation of my table (from the JSBin):

    var table = $('#example').DataTable({
      // ajax: '../../../../examples/ajax/data/objects.txt',
      data: selectJson,
      deferRender: true,
      // works if #check_all works with 
      // deferRender: false,
      columns: [
        { data: 'select', orderable: false }, // our new column
        { data: 'name' },
        { data: 'position' },
        { data: 'office' },
        { data: 'extn' },
        { data: 'start_date' },
        { data: 'salary' }
      ],
      paging:   true,
      pagingType:   'numbers',
      lengthMenu:   [20, 50, 100, 200, 500],
      ordering: true,
      info:     true,
      select: true
    });

Further research has found this SO Question, which points to this post

ianchanning

So far as I can tell, the answer is "you can't" and there's basically no way that you can.

The only way is for them to be included is for them to be rendered to the screen.

So I will have to store the state of the checkboxes separately from the data table.

ianchanning

My solution for this has been to store the state of the checkboxes separately from the table.

I store the state of the checkboxes in an unsorted object with just {id: 0/1}, I update this each time a checkbox is clicked or the select all is clicked. I assign an id to each of the rows with rowId.

Then I can combine the state with the table.rows().ids() which handles any sorting and filtering. The rows().ids() are unaffected by deferRender.

Then on the createdRow call back I set the checkboxes to be ticked/unticked depending on the checkboxes state.