DataTables.js：如何在更新单元格后重新呈现表格，以便表格了解有一个新值

我是DataTables的新手，遇到了一个我自己无法解决的巨大问题。这是我的现场演示，在某些地方有问题

让我试着解释一下：我有一个表id='js_table'，它从codepen中的AJAX调用中获取数据-从变量数据集获取数据。它有两列：Assigned和Name。当数据出现时，我渲染第一列，将是/否替换为type==display的圆圈和else的assigned/not assigned，这样看起来很好，并为用户提供了通过单击圆圈来分配或取消分配人员的机会

单击circle js_assign_元素时，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
})

---

你能帮我解答一下我的问题吗？谢谢

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

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

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

请参见此处的工作示例：

---

您不是在更新属性，而是在内部元素上更新属性。这就是它不起作用的原因。如果您能向我展示/解释如何更新td，我将不胜感激。谢谢