刷新数据表而不刷新页面 [英] Refresh datatable without refreshing page

问题描述

我有一个从数据库中获取数据的数据表。我想要做的是，当表中的记录被更改时，它应该自动反映在数据表中不刷新页面。

如何做到这一点？我尝试使用deferRender但它似乎无法工作。我哪里出错了？



我尝试了什么：

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');}
           }
       });

推荐答案

（'＃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']]，

列：[
{
mData ：ID，
可见：false
}，

{
mData：EstimatedTimeOut
}，
{
mData：EstimatedTimeReturn
}，
{
mData：BU，可见：false
}，
{
mData：BL
}，
{
mData：ActualTimeOut
}，
{
mData：ActualTimeReturn
}，

{
mData：null，
className： dt-body-center，
mRender：函数（数据，类型，行）{
if（row ['Status']！='Approved'）{
return null
} else {
return'< button type =buttonclass =btn btn-xs btn-warning btn-block FNSHid ='+ row ['ID'] +'onClick =endThisTrip（'+ row ['ID'] +'，\''+ row ['Title'] +'\'）>完成< / button>'
}
}
}
]，
order：[1，'dsc']，
initComplete：function（）{
this.api（）。columns（ ['5']）。every（function（）{
var column = this;
var select =

('#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（

('<select><option value=""></option></select>').appendTo(

（column.footer（））。empty（））。on（'change'，function（）{
var val =

(column.footer()).empty()).on('change', function () { var val =

这篇关于刷新数据表而不刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！