Question

我是DataTables的新手，我遇到了一个巨大的（对我来说）问题，我只是不知道如何解决。这是我的现场演示https://codepen.io/Balzzac/pen/mpdGgL，在某些地方有问题。

让我试着解释一下：我有一个表（id ='js_table'）从AJAX调用中获取数据（在codepen中 - 来自变量dataSet）。它有2列：“已分配”和“名称”。当数据出现时，我渲染第一列，将“yes”/“no”替换为类型为===“display”的圈子，将“assign”/“not assigned”替换为“else”，因此它看起来不错并提供给用户通过点击圈子分配或取消分配人员的机会。

当点击圆圈（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
})

你能看一下我的问题并帮助我吗？感谢

Answer 1

您还应该更新数据数组。只需使用包含更改值的新数据更改数据。

清除上一个表格，然后将修改后的数据添加到表格中并重新绘制。

$(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

DataTables.js：如何在更新单元格后重新呈现表，以便表理解存在新值

1 个答案: