从数组列表中刷新数据表数据

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> 

希望有所帮助。