用新数据刷新数据表

Question

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

如何在不使用影响 UI 的 clear 方法的情况下使用新数据重新初始化 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 功能中内置的dataTables，而不是重新发明轮子。如果你这样做了，你可以很容易地使用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);