jquery - Json 响应未绑定(bind)到 jquery 数据表

Question

我想根据请求参数使用不同的数据集填充 jquery 数据表。我收到对象 json 响应，因为我无法将其绑定(bind)到数据表。它抛出错误为

DataTables 警告:表 id=calltable - 请求第 0 行第 0 列的未知参数“0”。有关此错误的详细信息，请参阅 http://datatables.net/tn/4

<script>
var table;
var all_data;
    jQuery(document).ready(function($) {
          table = $('#calltable').DataTable({
              "data":all_data,
              bSort: false,
                aoColumns: [ { sWidth: "10%" }, { sWidth: "10%" }, { sWidth: "10%", bSearchable: false, bSortable: false },{ sWidth: "10%" },{ sWidth: "10%" },{ sWidth: "10%" },{ sWidth: "10%" },{ sWidth: "10%" },{ sWidth: "10%" },{ sWidth: "10%" } ],
            "scrollY":        "200px",
            "scrollCollapse": true,
            "info":           true,
            "paging":         true

              });

 $("#search-form").submit(function(event) {      
            searchLOVViaAjax();
        });

function searchLOVViaAjax() {

    var search = {}
    search["lovId"] = "CURRENCY_QUERY_ID";

    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : "${home}search/api/getLOVList",
        data : JSON.stringify(search),
        dataType : 'json',
        timeout : 100000,
        success : function(data) {
            console.log("SUCCESS: ", data);
            display(data);
        },
        error : function(e) {
            console.log("ERROR: ", e);
            display(e);
        },
        done : function(e) {
            console.log("DONE");
            enableSearchButton(true);
        }
    });

}
function display(data) {
        var json = "<h4>Ajax Response s</h4><pre>"
                + JSON.stringify(data, null, 4) + "</pre>";
        $('#feedback').html(json);
        all_data = data;
        table.clear().row.add(all_data).draw();

    }
</script>

我的 html 看起来像

<div id="LOVID">
    <table id="calltable" class="display" cellspacing="0" width="100%">
    </table>
    <div id="feedback"></div>
</div>

我的 Json 看起来像数据

{
"msg": "",
"code": "200",
"data": [
    {
        "id_Column": "001",
        "columnValue1": "US DOLLAR",
        "columnValue2": "US DOLLAR",
        "columnValue3": "2006-07-17 15:21:58.0",
        "columnValue4": "USD",
        "columnValue5": "US DOLLAR",
        "columnValue6": null,
        "columnValue7": null,
        "columnValue8": null,
        "columnValue9": null,
        "columnValue10": null
    },
    {
        "id_Column": "002",
        "columnValue1": null,
        "columnValue2": null,
        "columnValue3": "2006-07-17 15:24:34.0",
        "columnValue4": "INR",
        "columnValue5": "INDIAN RUPEE",
        "columnValue6": null,
        "columnValue7": null,
        "columnValue8": null,
        "columnValue9": null,
        "columnValue10": null
    },
    {
        "id_Column": "003",
        "columnValue1": null,
        "columnValue2": null,
        "columnValue3": "2006-07-17 15:36:38.0",
        "columnValue4": "JPY",
        "columnValue5": "JAPANESE YEN",
        "columnValue6": null,
        "columnValue7": null,
        "columnValue8": null,
        "columnValue9": null,
        "columnValue10": null
    }    
]

}

我不知道如何将这个 json 值推送到数据表，尝试了所有方法。

Answer 1

如果您想向 dataTables 提供 json 对象(无需服务器端处理)，您可以这样做:

$('#yourTable').DataTable( {
    data: yourJsonObject,
    columns: [
        { data: "id_Column" },
        { data: "columnValue1" },
        { data: "columnValue2" },
        { data: "columnValue3" },
        { data: "columnValue4" },
        { data: "columnValue5" },
        { data: "columnValue6" },
        { data: "columnValue7" },
        { data: "columnValue8" },
        { data: "columnValue9" },
        { data: "columnValue10" },
    ]
} );

在您的情况下，“yourJsonObject”应该是 json 对象内的“data”数组。看看这个Nested Object example还有这个javascript sorced example