Datatables instance not synced with DOM (input checkbox status)

I have a table my_tbl initialized with datatables2.1.8.js jQuery library:

/* using python django template because table template is not in the same html file */
{% include 'my_tbl_template.html' %}  

let my_tbl=$('#my_tbl').DataTable({...}),

each cell containing <input type="checkbox" value="some_value"> whether initially checked or unchecked; The problem exactly is that my_tbl is not synced with the html dom after changing manually the checkboxes status! (check or uncheck);

e.g. when I have two checkboxes (2 cells) initially both checked, when user unchecks one of them

printCheckboxStatusDom() prints 1 //(expected number of checked checkboxes)

but

printCheckboxStatusTbl() prints 2 //the initial checked checkboxes

$(document).ready(function(){
    $('input[type=checkbox]').change(function() {
        printCheckboxStatusDom();  // prints correctly how many checkbox is checked at this time
        printCheckboxStatusTbl(); //always prints initialized values (no change)
});



function printCheckboxStatusDom(){
    let checkeds = $(document).find('input[type=checkbox]:checked');
    console.log('DOM: checked boxes: ' + checkeds.length);
}



/* Function to print checkboxes status in the my_tbl instance */
function printCheckboxStatusTbl() {
    my_tbl.rows().every(function (rowIdx, tableLoop, rowLoop) {
        let rowNode = this.node();
        let cellCheckboxes = $(rowNode).find('input[type=checkbox]:checked');
        console.log('Tbl: checked boxes: ' + cellCheckboxes.length);

         }
     );
 }
Вернуться на верх