Json响应不绑定到jquery数据表

时间:2016-08-09 13:21:38

标签: jquery json datatables

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

DataTables警告:table 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值推送到datatable尝试过的所有东西。

1 个答案:

答案 0 :(得分:1)

如果你想用json对象提供dataTables(没有服务器端处理)你可以这样做:

$('#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