dataTable.Draw() not showing latest data?

kowadago

I am updating a selection option in my dataTable let's say from 'A' (default selection) to 'B', on selection change, an AJAX request updates the DB and returns successful operation if all went well. On Client side, I update an icon beside the selection drop down list to show that all went well and that the selection is now set to 'B'. When sorting the table by the selection column it behaves as if the row still has the old value 'A'! i.e. The row where the selection has changed to 'B' appear among other rows with 'A' selection. instead of being grouped with 'B' rows as expected.

I have set the table.draw(false) function at the end of the success function from the AJAX request. the table maintains page and it seems to have executed the line. But its behavior shows otherwise.

What stops the draw function from behaving as expected with the new data? I read that data maybe cached, but it seems to be related to older versions, in the docs https://datatables.net/reference/api/draw() it says that it'll be recalculated, so I don't think cache is an issue

  full-reset or true (default) - the ordering and search will be recalculated and the rows redrawn in their new positions. The 
  paging will be reset back to the first page.

Appreciate your feedback,

kowadago

I also tried cell/row invalidation but the behavior has not changed

table.cell(table.$("#"+myElement)).invalidate();
table.draw(false);

kowadago

Ok.. that was tricky!

Found the answer here: https://stackoverflow.com/a/43634333/1394228
You need to change the cell data value, so you need not to change it using jquery .html or .text but to wrap the cell you want to change in table.cell(your cell here).data(new value)

Example:
table.cell($("#myDiv")).data(myNewvalue);

After that, just call table.draw(false) after you update the cell value as mentioned above

That worked for me!