How to re-render the table after updating a cell so the table understands that there is a new value

yairam

Hi! I am a newbie to DataTables and I encountered with a huge (for me) problem that I just don't get how to solve. Here is my live demo https://codepen.io/Balzzac/pen/mpdGgL with questions in certain places .

Let me try to explain: i have a table (id='js_table') that gets data from AJAX call (in codepen - from variable dataSet). It has 2 columns: "Assigned" and "Name". When data comes I render the first column, replacing "yes"/"no" with circles for type==="display" and with"assigned"/"not assigned" for "else", so it looks nice and provide a user the opportunity via clicking on the circle to assign or unassign a person.

When clicking on the circle (js_assign_element), JS runs a function where it replaces classes (from green to red and vice versa) as well as changing data-attributes into "assigned" when the person wasn't assigned and "not assigned" when person was. But the table itself doesn't "understand/recognize" the change, so it sorts and filters the first column like no changes were made.

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

Can you please look and help me with my question(s)? Thanks

jvretamero

do i need this "createdRow"? if i want elements in the column "Assigned" be filtered/searched/sorted by words "assigned" / "not assigned"

This is not necessary, I usually use the column.render option, because you can define any value for display, sorting or filtering.

is the render function correct

Yes, you are correctly verifying the type parameter.

user can change whether a person assigned or not via click on the circle (function below), but when i change data-attributes, the first column is still searched / filtered by the original data. HOW I CAN SOLVE THIS PROBLEM?

Check this forked example.