I have a paged DataTable and I would like to update the content for a specific column for the current visible page after that the page is loaded. I found out that the event that fires when the table page is loaded is drawCallback, so I wrote this code:
$(document).ready(function() {
var table = $('#dataTables-ordini').DataTable({
"aoColumnDefs": [
{ "sType": 'numeric' },
{ "sType": 'string' },
{ "sType": 'date' },
{ "sType": 'numeric' },
{ "sType": 'string' },
{ "sType": 'numeric' },
{ "sType": 'string' } ],
order: [[ 0, "desc" ]],
responsive: true,
drawCallback: function(settings) {
$('.numero_ordini_prec:visible').each(function(index){
var id = $(this).attr('myid');
var cell = $(this);
var cell_dom = this;
if (cell.html() == 'ND') {
$.get('get_data.php?id='+id, function(data){
cell.html(data);
table.cell( cell_dom ).draw();
});
}
});
}
});
});
It works, but there is a problem with the refresh of the data just updated: if I invalidate like this table.cell( cell_dom ).invalidate().draw();
it goes in an infinite loop because on each invalidate it raise the drawCallback.
If I only run table.cell( cell_dom ).draw(); it works but it goes back to visualize the first page, also if I clicked the 2 or third page.
So the question is: how can I update a cell in a drawCallback without these problems?