javascript - jQuery DataTables 重复项最初正在加载

Question

所以，补充一下我昨天的问题:jQuery AJAX call function on timeout

使用昨天帖子中的第一个答案，该表确实会重新加载而无需刷新整个页面。 30 秒后就会执行此操作。

但我的问题出在第一次刷新之前......

页面加载，并且记录重复。但在第一次刷新和之后的每次刷新(除非我使用 F5 手动刷新)之后，一切都很好。没有重复。

我试图找出为什么存在重复项以及如何在页面初始就绪事件时删除重复项。

这是代码，从就绪事件开始:

 $(document).ready(function()
 {
   $.ajax({
     url:'api/qnams_all.php',
     type:"GET",
     dataType:"json"
   }).done(function(response) {
     console.log(response.data);
     renderDataTable(response.data)
   }).fail(function() {
     alert( "error" ); 
   }).always(function() {
     alert( "complete" );
   });
 });

这是加载数据表的函数:

 function renderDataTable(data)
 {
   var $dataTable = $('#example1').DataTable({
     "ajax": 'api/qnams_all.php',  // just added this
     "data": data,
     "bDestroy": true,
     "stateSave": true
   });

 // then I add the reload function

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

 });

如上所述，setInterval 函数的工作方式与应有的方式相同。只是初始页面加载复制了所有记录。

有人知道为什么以及如何解决它吗？

Answer 1

我认为你有一些重复的情况发生。您不需要加载 ajax flie，然后在设置 DataTable 时再次加载它。

尝试用以下代码替换所有代码:

$(document).ready(function() {
  // load and render the data
  var $dataTable = $('#example1').DataTable({
    "ajax": 'api/qnams_all.php', // just added this
    "data": data,
    "bDestroy": true,
    "stateSave": true,
    // the init function is called when the data table has finished loading/drawing
    "init": function() {
      // now that the initial data has loaded we can start the timer to do the refresh
      setInterval(function() {
        $dataTable.ajax.reload();
      }, 30000);

    }
  });
});