Click here to Skip to main content
15,347,244 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();
   

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