Question

我有一个表，我正在使用jQuery Datatable。该表每15秒更新一次，包含新数据。我正在使用最新版本的Datatable。

如何在不使用影响用户界面的明确方法的情况下使用新数据重新初始化数据表？

我的代码：

jQuery.ajax({
    type: 'POST',
    url: /list_tasks',
    data: ajaxData,
    spinner: true,
    success: function (response) {
        $('#task_table').html(response.html)
        if ( $.fn.DataTable.isDataTable('#task_table')) {
            $('#task_table').DataTable().destroy();
        }
        var dataTable=$('#task_table').DataTable({
            deferRender:true,
            destroy: true,
            scrollCollapse: true,
            scroller:       true,
            scrollY:        "200px",
            bFilter:false,
            bInfo: false,
            bLengthChange:false,
             initComplete: function(settings, json) {

            },
            fnDrawCallback:function(){

            }
        });        
    }   
});

Answer 1

您应该依赖内置ajax功能的dataTable，而不是重新发明轮子。如果您这样做，则可以使用ajax.reload()：

轻松更新表格

var dataTable =$('#task_table').DataTable( {
   ajax: {
     url: '/list_tasks',
     data: ajaxData
   },
   deferRender:true,
   scrollCollapse: true,
   scroller:       true,
   scrollY:        "200px",
   bFilter:false,
   bInfo: false,
   bLengthChange:false,
   initComplete: function(settings, json) {
   }, 
   fnDrawCallback:function(){
   }
});  

setInterval(function() {
  dataTable.ajax.reload()
}, 15000);

<强>更新即可。如果您重复向DOM注入表并将其删除，并且之后将其实例化为dataTable，则永远无法阻止对UI的闪烁或影响。另一种方法是将表代码分离到不同的PHP脚本中，并将其放在iframe中：

<iframe src="table.php" id="table"></iframe>

然后每15秒更新一次iframe：

setInterval(function() {
  $('#table')[0].contentWindow.location.reload(true);
}, 15000);

使用新数据刷新数据表

1 个答案: