jQuery 初始加载 DataTables 副本

Question

所以，补充一下我昨天的问题：

使用昨天 post 的第一个答案，table 确实在没有刷新整个页面的情况下重新加载。它会在 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 文件，然后在设置 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);

    }
  });
});

Answer 2

在将数据加载到 table:

中时调用清除可防止出现重复行

$("#checkResourcesButton").click(function() {
        $.post("./get/resources", {
            featureName: $('#myvar').val()
        }).done(function (data) {
            var table = $('#table-output').DataTable();
            table.clear();
            var json = JSON.parse(data);

            for (var row in json) {
                var nameVal = json[row].Name;
                var emailVal = json[row].emailId;
                var roleVal = json[row].role;
                var startDateVal = json[row].startDate;
                var endDateVal = json[row].endDate;
                var toAdd =
                    {
                        name: String(nameVal),
                        emailId: String(emailVal),
                        role: String(roleVal),
                        startDate: String(startDateVal),
                        endDate: String(endDateVal)
                    };
                table.row.add(toAdd);
            }

            table.draw();
        });
    });

jQuery 初始加载 DataTables 副本

jQuery DataTables duplicates are initially loading

javascript

ajax

jquery

datatables

reload