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

我正在尝试在 jQuery 中显示 REST 调用 JSON 响应数据表 http://datatables.net.

以下是我收到的 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 响应加载到数据表中吗？有没有更好的方法来获得此功能？

你做的每件事都是正确的，你只是犯了一个菜鸟错误，而且很容易被忽视。

当你这样做时

$("#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 示例 http://jsfiddle.net/Bva8m/看看它的实际效果。

The 动态添加新行 http://datatables.net/release-datatables/examples/api/add_row.html示例数据表网 http://datatables.net/相当差，因为它正在执行内联 API 调用，而不需要添加引用。下面的例子更好地证明了这一点多重过滤 http://datatables.net/release-datatables/examples/api/multi_filter.html.

您还可以在他们的网站上阅读相关内容API文档 http://datatables.net/api.
提示：它在下面的第一行中演示$