Javascript jQuery数据表副本最初正在加载

所以，我昨天的问题是：

使用昨天帖子中的第一个答案，该表确实可以在不刷新整个页面的情况下重新加载。它会在30秒后这样做

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

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

我试图弄清楚为什么会有重复项，以及如何在页面的初始就绪事件中删除重复项

以下是代码，从ready事件开始：

 $(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函数的工作方式与它应该的工作方式相同。只是初始页面加载复制了所有记录

---

有人知道为什么以及如何修复它吗？

我想你有一些重复。您不需要加载ajax flie，然后在设置

数据表时再次加载它

尝试用以下内容替换所有代码：

$(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);

    }
  });
});

调用clear可在将数据加载到表中时防止重复行：

$("#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();
        });
    });

为数据记录设置一个变量，并在每个间隔将变量设置为“”。（空白）请原谅，忽略这一点，使用div上的.empty（）清除数据表。或者一旦它被加载，清除setInterval（除非你检查新数据），你能给我提供一些类似的示例代码吗？请原谅我对这件事的无知。非常感谢您的帮助。请仅对必须大写的项目（如HTML）使用大写。jQuery用一个大写字母拼写，而DataTables只有两个大写字母。对于很多人来说，使用全大写类似于叫喊。因此，利用您的代码，我可以去掉renderDataTable函数，将所有内容都放在READY事件中？是的，我这么认为。我对
数据表
一无所知，但从我阅读的内容来看，它应该可以工作。我会尝试一下。我会告诉你的，运气不好。控制台无法识别“数据”：数据我认为您不需要
“数据”：因为您使用的是
“ajax”：“api/qnams\u all.php”
。