最初加載 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

我認為你有一些重復。 您不需要在設置DataTable時加載 ajax fly 然后再次加載它。

嘗試用這個替換你的所有代碼：

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

在將數據加載到表中時，調用 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();
        });
    });