jQuery DataTables - Cannot click element that is not visible

Question

I have a DataTable and each row in the table as a column containing a checkbox so that items can be selected/unselected. What I'm trying to add now is a select/unselect all button.

I'm using the following code to select all the elements in the table:

var all_rows = table.fnGetData();
var all_nodes = table.fnGetNodes();

for (var i=0;i<all_nodes.length;i++)
{
    current_data = all_rows[i];
    element_data = jQuery(current_data[4]).find('.include_element_data:first').val();

    if(element_data == '1') {
        $(all_nodes[i]).children('td:eq(4)').find('.tick_box:first').click();
    }
}

The above code works, but only works for the rows that are visible. So in my case only in the first 10 rows I'm able to programatically click the checkboxes. Once the code tries to click on the checkbox of the 11th row I'm getting the following exception:

Uncaught TypeError: Cannot read property 'aoData' of null

It must be noted that the table I'm using is not loaded on page load, but loaded via the JavaScript code since it's a sub table in a row, not sure if this changes anything.

Thanks in advance

Answer 1

Try having a common class (say tdcheck) for all the checkboxes in the table. And add the following code in the click event of header checkbox

$("#headercheck").live("click",function(){
     $(".tdcheck").attr("checked",this.checked);
});

Check the below fiddle

http://jsfiddle.net/8YWXP/

I also tried the method you mentioned but it caused some error. So I ended up with the manual solution. Only the visible rows will be selected/unselected.