Update Jquery Datatable Cell Value

Question

I have a jquery datatable with a many spans in it. The table is loaded in with ajax data from a DB then the spans are dynamically updated to match all the other spans with the same class when a user changed a value.

The issue I am having though is that when I update the spans datatable doesn't seem to know it was updated.

For example if I make update the value to 555 and then search for 555 it doesn't return a result.

I tried to use .draw() but it doesn't seem to work. How do I have datatable update all the cell values without destroying and rebuilding the table. Destroy just seems like massive overkill.

Answer 1

I have been beating on this for a while now and I think it may have to do with cache that datatable uses. What I found though was that if you find the cell then set the data attribute to the html value of the cell it works. So for example you would do something like this.

var UpdateTD = $(".changemade").parent('td');
table.cell( UpdateTD ).data( UpdateTD.html()).draw();

That is the only way I have found to make to make it work. It doesn't seem like the best way to do this, but it does work. Here is the updated fiddle showing it in action https://jsfiddle.net/jebwq9yL/1/

Answer 2

Define the table as global variable like this

HTML Update Used <td class="changemade">Tiger Nixon</td>. removed span from your code. to access a cell you have to give class name or id to the td not span.

var table;
$(document).ready(function() {
  ........
  // DataTable
  table = $('#example').DataTable();
  ........
  });
$('.changebutton').on('click', function () {
    // update cell value based on selector
    table.cell($('.changemade')).data('MEOW!').draw()
});
});
//and use this code to listen the draw event.
table.on('draw', function() {
  alert('table has been re-drawn')
});

DEMO

In your fiddle the search works because variable table and search function are in same scope but table.draw is out of the scope so it is not working