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

Question

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

下面是我收到的 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看看它的实际效果。

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

您还可以在他们的 API documentation 上阅读相关内容。 .
提示:它在$下的第一行中演示