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

我试图在jQuery datatables中显示REST调用JSON响应。如何将REST调用JSON响应追加到jQuery数据表？

下面是我收到的JSON响应。

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

脚本：

<script type="text/javascript"> 
     $(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 ] 
           ); 
       }); 
      }); 
     } 
</script>

的HTML：

<form class="searchform"> 
     <input class="searchfield" type="text" /> 
     <input class="searchbutton" type="button" value="Go" id="go" onclick="submitForm()" /> 

</form> 
    <div id="container"> 
     <div id="demo_jui"> 
      <table id="artifacts" class="display"> 
        <thead> 
          <tr> 
           <th>Artifact Id</th> 
           <th>Batch Id</th> 
           <th>Legacy Id</th> 
          </tr> 
        </thead> 
        <tbody> 
        </tbody> 
      </table> 
     </div> 
    </div>

有人可以提供关于为什么我无法加载JSON响应到数据表的答案吗？有没有更好的方法来获得这个功能？

来源

2012-03-06 Ajay

你一切正常，你只是做一个菜鸟的错误，很容易错过。

当你

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

你正在创建一个新的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 example看到它在行动。

datatables.net上的dynamically add new row示例相当差，因为它在执行内联API调用而不需要添加引用。在他们的以下示例multi filtering上更好地证明了这一点。

你也可以在他们的API documentation上看到它。
提示：它在第一行下显示$

来源

2012-03-06 10:41:27 ShadowScripter

感谢ShadowScripter！有效。我在文档中阅读了更多信息，并使用了serverside json响应数据表。但分页/排序/搜索仍然是一个问题。（猜测，这一定是因为sEcho的原因。）有没有类似于REST XML响应的数据表 - 具有分页/搜索功能？非常感谢！帮助赞赏！ – Ajay 2012-03-06 14:19:04

@Ajay分页/排序/搜索应该没有问题。如果您查看我的示例，请添加超过10行并尝试排序。它的工作原理与其应有的一样。询问有关该问题的新问题。另外，如果你打算自己做所有事情，包括排序/分页/搜索，你应该只使用'bServerside'。默认情况下将'bServerside'设置为false是您在这种情况下想要的。 – ShadowScripter 2012-03-06 14:25:58

谢谢！我为xml响应提出了一个单独的问题。 [问题]（http://stackoverflow.com/questions/9585760/how-to-build-datatable-using-jquery-from-rest-xml-response） – Ajay 2012-03-06 14:41:41

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

回答

相关问题