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);
}
);
}