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

Question

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

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

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 example 来查看它的实际应用。

datatables.net 上的 dynamically add new row 示例相当糟糕，因为它执行内联 API 调用而无需添加引用。在multi filtering 上的以下示例中更好地演示了这一点。

您也可以在他们的API documentation 上阅读有关它的信息。
提示：它在$ 下的第一行中进行了演示