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

renuka · Accepted Answer · 2013-12-31 11:20:58Z

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.

answered Dec 31, 2013 at 11:20

renuka

5492 gold badges5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Grima Over a year ago

Thanks for the answer, but the thing is I need to have the checkbox literally 'clicked' not simply have it's checked status changed to 'checked'. And still as I said the code does work, it's simply not working for the rows that aren't visible.

Collectives™ on Stack Overflow

jQuery DataTables - Cannot click element that is not visible

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related