DataTables.js: как повторно отображать таблицу после обновления ячейки, чтобы таблица понимала, что есть новое значение

Я новичок в DataTables, и я столкнулся с огромной (для меня) проблемой, которую я просто не понимаю, как решить. Вот моя живая демонстрация https://codepen.io/Balzzac/pen/mpdGgL с вопросами в определенных местах.

Позвольте мне объяснить: у меня есть таблица (id='js_table'), которая получает данные из вызова AJAX (в codepen - из переменной dataSet). Он имеет 2 столбца: «Назначено» и «Имя». Когда приходят данные, я отображаю первый столбец, заменяя «да»/«нет» кружками для типа === «отображать» и «назначено»/«не назначено» для «остального», так что это выглядит красиво и предоставляет пользователю возможность, нажав на кружок, назначить или отменить назначение человека.

При нажатии на кружок (js_assign_element) JS запускает функцию, в которой заменяет классы (с зеленого на красный и наоборот), а также меняет атрибуты данных на «назначенные», когда человек не был назначен, и «не назначен», когда человек был. Но сама таблица не «понимает/не распознает» изменение, поэтому она сортирует и фильтрует первый столбец, как будто изменений не было.

$(document).off('click', '.js_assign_element').on('click', '.js_assign_element', function (event) {
     event.preventDefault();
    event.stopPropagation();
    if ($(this).hasClass("__assigned")) {
        $(this).removeClass("__assigned").attr("data-search", "not assigned").attr("data-filter", "not assigned").attr("data-sort", "not assigned").attr("data-order", "not assigned")
    }
    else
    {
        $(this).addClass("__assigned").attr("data-search", "assigned").attr("data-filter", "assigned").attr("data-sort", "assigned").attr("data-order", "assigned")
    }

    // Tried Following:
    // $("#js_table").DataTable().draw() - doesn't work
    // $("#js_table").DataTable().rows().invalidate("dom").draw() - doesn't work
    // $("#js_table").DataTable().rows().invalidate().draw() - doesn't work either
})

Не могли бы вы посмотреть и помочь мне с моим вопросом (ами)? Спасибо


datatables datatables-1.10
person Мария    schedule 12.12.2017    source источник
comment
Вы не обновляете атрибуты на ‹td›, а на внутренних элементах. Вот почему это не работает.   -  person davidkonrad    schedule 13.12.2017
comment
Буду очень признателен, если вы покажете/объясните мне, как обновить td. Спасибо!   -  person Мария    schedule 13.12.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вы также должны обновить массив данных. Просто замените данные новыми данными, содержащими измененное значение.

Очистите предыдущую таблицу, затем добавьте измененные данные в таблицу и перерисуйте.

$(document).off('click', '.js_assign_element').on('click', '.js_assign_element', function (event) {
     event.preventDefault();
    event.stopPropagation();
    if ($(this).hasClass("__assigned")) {
        $(this).removeClass("__assigned").attr("data-search", "not assigned").attr("data-filter", "not assigned").attr("data-sort", "not assigned").attr("data-order", "not assigned")
    }
    else
    {
        $(this).addClass("__assigned").attr("data-search", "assigned").attr("data-filter", "assigned").attr("data-sort", "assigned").attr("data-order", "assigned")
    }


    var test = $(this).parents('tr').find('td:eq(1)').html();

    var setval = ($(this).hasClass('element_assign __assigned'))? 'yes' : 'no';


    $.each(dataSet, function(i,v){
        var tes = v.indexOf(test);
        // tez[i] = ['yes', test];
        if(v[1] === test){
            //console.log(v);
            //console.log(dataSet[i][0]);
        dataSet[i][0] = setval; 
        }
    })


   $('#js_table').DataTable().clear().draw();
   $('#js_table').DataTable().rows.add(dataSet); // Add new modified data
   $('#js_table').DataTable().columns.adjust().draw(); // Redraw the DataTable


    // Tried Following:
    // $("#js_table").DataTable().draw() - doesn't work
    // $("#js_table").DataTable().rows().invalidate("dom").draw() - doesn't work
    // $("#js_table").DataTable().rows().invalidate().draw() - doesn't work either
})

См. рабочий пример здесь: https://codepen.io/anon/pen/KZKOzx

person DennisFrea    schedule 13.12.2017