如何将REST调用JSON响应附加到jQuery数据表？

我正在尝试在jQuery数据表中显示REST调用JSON响应。

以下是我收到的JSON响应。

{ "artifact": [ { "artifactId": "I8cc4a96ef69a11e08b448cf533780ea2", "batchId": "15581", "processId": "115458787" }, { "artifactId": "e08b448cf533780ea2I8cc4a96ef69a11", "batchId": "14962", "processId": "787974254" } ] } 

剧本：

  $(document).ready(function () { $("#artifacts").dataTable({ "sPaginationType": "full_numbers", "bJQueryUI": true }); }); function submitForm() { $.getJSON('http://myurl.com/JerseySample/rest/search', function(data) { $.each(data.artifact, function(i,artifact){ $('#artifacts').datatable().fnAddData([ artifact.artifactId, artifact.batchId, artifact.processId ] ); }); }); }  

HTML：

 
   
 
 
 
 
 
 
Artifact Id
 
Batch Id
 
Legacy Id
 
 
 
 
 
 
  

有人能解释为什么我无法将JSON响应加载到数据表中吗？ 有没有更好的方法来获得此function？

Answer 1

你做的一切都是正确的，你只是做了一个新手的错误，很容易错过。

当你这样做

 $("#artifacts").dataTable(); 

您正在创建一个新的数据表实例。 Datatables在该调用上返回对象实例（带有API函数），但是您没有将该实例存储在任何地方，因此，您将丢失对刚刚创建的数据表的所有引用。

要解决此问题，只需添加对您创建的数据表的引用即可

 var thisTable = $("#artifacts").dataTable( { "sPaginationType": "full_numbers", "bJQueryUI": true } ); 

然后在每个函数中引用它

 $.each(data.artifact, function(i,artifact){ thisTable.fnAddData( [ artifact.artifactId, artifact.batchId, artifact.processId ] ); }); 

这是一个JSFiddle示例，可以看到它的实际效果。

在datatables.net上动态添加新行示例相当差，因为它正在进行内联API调用而无需添加引用。 在以下关于多重过滤的示例中更好地展示了它。

您还可以在他们的API文档中阅读它。
提示：它在$下的第一行演示