從數組列表中刷新數據表數據

Question

我有2個HTML，其中我只是用json加載數據，然後在它們上應用jQuery數據表。我現在需要的是刷新數據，但使用新的參數。

示例。

JSON: 
    [ 
    {"name":"jon","sales":"100","set":"SET1"}, 
    {"name":"charlie","sales":"500","set":"SET1"}, 
    {"name":"jon","sales":"350","set":"SET2"}, 
    {"name":"charlie","sales":"300","set":"SET2"}] 

    <table id="SET1" class="display compact"> 
    <tr><th>Name</th><th>Sales</th> 
    </table> 
    <table id="SET2" class="display compact"> 
    <tr><th>Name</th><th>Sales</th> 
    </table> 

    JS: 

    var uri = 'api/schedules'; 
      $(document).ready(function() { 
       //function to refresh data 
       //loop thru every dept and query new data. 
       (function() { 
        var departments = ['Accounting', 'Sales', 'Marketing'] 
        var idx = 0; 
        var len = departments.length; 
        function doNext() { 

         var entry = departments[idx]; 
         console.log(idx + ":" + entry); 
         GetData(entry) 
         idx++; 
         if (idx < len) { 
          // Don't do anything special 
         } else { 
          // Reset the counter 
          idx = 0; 
         } 
         setTimeout(doNext, 10000); 
        } 
        doNext(); 
       }());//end of function 
      }); //End Jquery Ready 


     function GetData(dept) { 
       $.getJSON(uri, { department: dept }) 
        .done(function (data) { 
         // On success, 'data' contains a list of products. 
         var tr; 
         $.each(data, function (key, item) { 
          tr.append("<td >" + item.NAME + "</td>"); 
          tr.append("<td>" + item.SALES+ "</td>"); 
          tr.append("</tr>"); 
//loading the data to respective table set 
          $("#" + item.SET).append(tr); 

         }); 
      }) 
      } 

加載數據的函數有效。我可以每分鐘看到新的數據。僅在手動運行時才初始化數據表。

但是，如果我調用GetData（部門）只有第一個'部門'被加載。在第二個部門，我從數據表中收到錯誤，它無法將數據加載到表中。

我試着用table.empty（）aldo table.destroy（）清除表格，並重新繪製了 ，但是我一直無法使它工作。

如何刷新和重繪數據表上的數據？

Answer 1

問題是您沒有使用DataTable添加您的數據。相反，你手動添加行，這是低效的，意味着DataTables不會知道它們，所以排序，搜索等將無法按預期工作。而不是使用rows.add()。這JSFiddle似乎是在做你需要什麼，儘管我有僞造阿賈克斯，所以你需要把正確的getJSON()回：

let columns = [{ 
    "title": "Name", 
    "data": "name" 
}, { 
    "title": "Sales", 
    "data": "sales" 
}]; 

let SET1 = $("#SET1").DataTable({ 
    "columns": columns 
}); 
let SET2 = $("#SET2").DataTable({ 
    "columns": columns 
}); 

let response = [{ 
    "name": "jon", 
    "sales": "100", 
    "set": "SET1" 
}, { 
    "name": "charlie", 
    "sales": "500", 
    "set": "SET1" 
}, { 
    "name": "jon", 
    "sales": "350", 
    "set": "SET2" 
}, { 
    "name": "charlie", 
    "sales": "300", 
    "set": "SET2" 
}]; 

let GetData = (dept) => { 
    $.ajax({ 
     "type": "POST", 
     "dataType": "json", 
     "url": "/echo/json/", 
     "data": { 
      "json": JSON.stringify(response) 
     }, 
     "success": (data) => { 
      console.log(data); 
      SET1.clear().rows.add(data.filter(x => x.set === "SET1")).draw(); 
      SET2.clear().rows.add(data.filter(x => x.set === "SET2")).draw(); 

     } 
    }); 
} 

let departments = [ 
    'Accounting', 
    'Sales', 
    'Marketing' 
]; 
let idx = 0; 

let doNext =() => { 
    let entry = departments[idx]; 
    console.log(idx + ":" + entry); 
    GetData(entry) 
    idx++; 
    if (idx === (departments.length)) { 
     idx = 0; 
    } 
    setTimeout(doNext, 10000); 
} 
doNext(); 

而且，你的HTML創建表可以簡化爲：

<table id="SET1" class="display compact"></table> 
<table id="SET2" class="display compact"></table> 

希望有所幫助。