javascript - 用新数据刷新数据表

Question

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

如何在不使用 clear 方法的情况下使用新数据重新初始化 Datatable，这会影响 UI？

我的代码:

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 内置的数据表特征。如果这样做，您可以使用 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);

---

更新。如果您重复将表注入(inject)和删除 DOM，然后将其实例化为数据表，您将永远无法防止闪烁或对 UI 的影响。另一种方法可能是将表代码分离到不同的 PHP 脚本中，并将其放在 iframe 中:

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

然后每 15 秒更新一次 iframe 本身:

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