[Python] 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);

}
);
}

Continue reading...