Экземпляр Datatables не синхронизирован с DOM (состояние флажка ввода)

У меня есть таблица my_tbl, инициализированная с помощью библиотеки datatables2.1.8.js jQuery:

/* 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({...}),

каждая ячейка, содержащая <input type="checkbox" value="some_value"> независимо от того, была ли она изначально отмечена или не отмечена; Проблема именно в том, что my_tbl не синхронизируется с html dom после изменения вручную статуса чекбоксов! (ставить или снимать галочку);

например когда у меня есть два флажка (2 ячейки) изначально оба отмечены, когда пользователь снимает флажок с одного из них

printCheckboxStatusDom() печатает 1 //(expected number of checked checkboxes)

Но

printCheckboxStatusTbl() печатает 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);

         }
     );
 }

Проблема именно в том, что my_tbl не синхронизируется с html dom после изменения вручную статуса чекбоксов! (ставить или снимать галочку)

Исходя из кода, который вы показываете в вопросе, это происходит потому, что вы не обновляете таблицу при обновлении DOM. DataTables не делает этого автоматически, вам нужно обрабатывать это с помощью событий JS - либо вставляя/обновляя таблицу, либо просто пересоздавая ее.

Как вы можете/должны это сделать, зависит от того, как вы инициализируете таблицу, но вот наивный подход, который предполагает, что можно повторить исходную логику инициализации.

$(document).ready(function () {
    $('input[type=checkbox]').change(function () {
        // When a checkbox is toggled, re-create the table
        let my_tbl=$('#my_tbl').DataTable({...}),
    });
});

Скорее всего, будет быстрее обновлять таблицу, а не создавать ее каждый раз заново, но детали этого зависят от того, как выглядит ваш HTML (т.е., вероятно, потребуются идентификаторы для каждого элемента чекбокса).

Проблема была в иерархии инициализации DataTables в html странице! Мои функции printCheckboxStatusDom(), printCheckboxStatusTbl() и $(document).ready(function(){...}) хранились в javascript файле my_scripts.js в локальном каталоге, и текущая страница имела вид

    {% include 'my_tbl_template.html' %};
    <script>let my_tbl=$('#my_tbl').DataTable({...})</script>
    <script type="text/javascript" src="my_scripts.js">

поэтому я попытался изменить код на (init datatables в конце):

    {% include 'my_tbl_template.html' %}
    <script type="text/javascript" src="my_scripts.js">
    <script>let my_tbl=$('#my_tbl').DataTable({...})</script>

И проблема решена!

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