如何附加REST调用JSON响应到jQuery数据表？ [英] How to append REST call JSON response to jQuery datatables?

问题描述

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

I'm trying to display the REST call JSON response in jQuery datatables.

以下是我收到的JSON响应。

Below is the JSON response I'm receiving.

{
    "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响应加载到datatable中？有没有更好的方法来获得这个功能？

Can someone provide an answer on why I am unable to load the JSON response into datatable? Is there a better approach to get this functionality?

推荐答案

你做的一切都正确，你只是做一个菜鸟的错误，并且很容易错过。

You're doing everything right, you're just doing one rookie mistake, and it's easy to miss.

当您执行

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

您正在创建一个新的datatable实例。 Datatables在该调用中返回对象实例（使用API​​函数），但是您没有将该实例存储在任何位置，因此您将丢失所有对刚创建的数据库的引用。

You're creating a new datatable instance. Datatables returns the object instance (with API functions) on that call, but you're not storing that instance anywhere, therefor, you lose all reference to the datatable you just created.

要解决这个问题，只需添加一个对你创建的datatable的引用，这样

To solve this, just add a reference to the datatable you create like so

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

然后在每个函数中引用它

and then reference it in your each function

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

这是一个 JSFiddle示例看到它在行动。

Here's a JSFiddle example to see it in action.

动态添加新行 datatables.net 的示例相当差，因为它正在进行内联API调用，无需添加参考。有关多重筛选的以下示例，可以更好地展示。

The dynamically add new row example on datatables.net is fairly poor, since it's doing an inline API call without the need to add a reference. It is better demonstrated on their following example on multi filtering.

您还可以在 API文档上阅读。

提示：在 $

You could also read about it on their API documentation.
Hint: it is demonstrated in the first row under $

这篇关于如何附加REST调用JSON响应到jQuery数据表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！