I have a datatable that gets data from database. What i want to do is that when a record is changed in the table , it should automatically be reflected in the datatable "without" refreshing the page.
How can this be done? I tried using deferRender but it doesnt seem to work.Where am i going wrong?
What I have tried:
table = new $('#PTResults').DataTable({
"ajax":"https://Myapplication.com/_api/web/lists/GetbyTitle('DriveAlive')/items?",
"deferRender": true,
"data": data.d.results,
pageLength: -1,
aLengthMenu:[[10, -1],[10, 'All']],
columns: [
{
"mData": "ID",
visible: false
},
{
"mData": "EstimatedTimeOut"
},
{
"mData": "EstimatedTimeReturn"
},
{
"mData": "BU", visible: false
},
{
"mData": "BL"
},
{
"mData": "ActualTimeOut"
},
{
"mData": "ActualTimeReturn"
},
{
"mData": null,
"className": "dt-body-center",
"mRender": function (data, type, row) {
if (row['Status'] != 'Approved') {
return null
} else {
return '<button type="button" class="btn btn-xs btn-warning btn-block FNSH" id="' + row['ID'] + '" onClick="endThisTrip('+row['ID']+',\''+row['Title']+'\' )">Finish</button>'
}
}
}
],
"order": [1, 'dsc'],
initComplete: function () {
this.api().columns(['5']).every(function () {
var column = this;
var select = $('<select><option value=""></option></select>').appendTo($(column.footer()).empty()).on('change', function () {
var val = $.fn.dataTable.util.escapeRegex($(this).val());
column.search(val ? '^' + val + '$' : '', true, false).draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
$('#Preloader').hide();
$.when(ajaxRes).done(function(a){
console.log (a)
});
},
"rowCallback": function ( row, data, index ) {
if (!data.ActualTimeOut) {$('td', row).css('background-color', '#fdf7e4');}
if (data.ActualTimeOut && !data.ActualTimeReturn) {$('td', row).css('background-color', '#ffe7e7');}
if (data.ActualTimeOut && data.ActualTimeReturn) {$('td', row).css('background-color', '#dfffdd');}
}
});