Click here to Skip to main content
15,881,380 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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');}
           }
       });
Posted
Updated 22-Oct-21 6:21am

1 solution

Hi the following should refresh jQuery DataTables grid:
javascript - How to reload/refresh jQuery dataTable? - Stack Overflow[^]

JavaScript
$('#PTResults').DataTable().ajax.reload();
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900