Question

I am creating a HTML table dynamically and in the table header columns I have check boxes and text.Some check boxes are checked on initial load and some are not checked. After that I am applying datatable plugin on my HTML table. But When I check or un-check some of the check boxes in the header and try to read the new values I always get the original value of the check box while it was created.

Below is how I am reading the column check box values

var columns = $('#myTable').dataTable().dataTableSettings[0].aoColumns;
$.each(columns, function (i, v) {
    var object = jQuery.parseHTML(v.sTitle);//innerHTML of input type='checkbox'
    if (object != null) {
        chkbox = object[0]; //object[1] is Text
        isChecked=chkbox.checked;
    }
});

EDIT My HTML for checked and not checked check boxes on initial load

For Checked Check Box

<input style='margin-right:5px' onclick=EnableDisableColumn(this); id='" + id+ "'     **checked='checked'** type='checkbox' Value='" + value + "' name='" + name+ "' />"  

For Un -Checked Check Box

<input style='margin-right:5px' onclick=EnableDisableColumn(this); id='" + id+ "'      type='checkbox' Value='" + value + "' name='" + name+ "' />"
Was it helpful?

Solution

dataTables does not respond to changes in the DOM, and magically updates its internal variables when a checkbox is checked. dataTables return in any case the content of <th>'s as it was when the table was initialized. Seen from a dataTables point of view, the content of the <th> is just a peice of plain text.

Why go around dataTables anyway? The headers and the checkboxes are fully accessible in javascript or jQuery as always, with our without dataTables.

Here is an example -> http://jsfiddle.net/XTpKH/

var dataTable = $('#example').dataTable();

$('th').click(function() {
    var msg = 'this header checkbox is ';
    msg += $(this).find('input[type="checkbox"]').is(':checked') ? ' ' : 'not ';
    msg +='checked'
    alert(msg);
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top