DataTables如何使用来自json对象的多个数据

时间:2015-04-01 13:15:31

标签: ajax json jquery-datatables

所以我试图做的是从json文件中调用一些数据来填充我的表格。但是,我不想拥有大量json个文件,而是希望将一些数据保存在一个文件中。例如,我有两种类型的客户(人和公司),我希望将它们保存在同一个json中,但是作为不同的对象,因为每个客户都在不同的表中。

问题是:我无法访问JSON文件中的数据。

如果我在不同的文件中使用2种类型的客户端(person.json和company.json - 这样可以正常工作),我可以正常使用它。

我确实尝试了这两个例子,但没有一个能为我工作。

那么,我怎样才能从文件中获取数据?这是我的json和我的数据表代码:

{
    "clients": {
        "person": [
            {
                "cd":0,
                "id":"C-0010",
                "nm_cliente":"Name AAA",
                "dt_nasc":"02/11/1990",
                "info":"Some basic info"
            },
            {
                "cd":1,
                "id":"C-0013",
                "nm_cliente":"Name BBB",
                "dt_nasc":"02/11/1990",
                "info":"Some basic info"
            },
            {
                "cd":2,
                "id":"C-0017",
                "nm_cliente":"Name CCC",
                "dt_nasc":"02/11/1990",
                "info":"Some basic info"
            }
        ],
        "company": [
            {
                "cd":0,
                "id":"C-0032",
                "nm_cliente":"Name Client",
                "num_cnpj":"111.222.3333/0001-22",
                "nm_cidade":"City AAA"
            },
            {
                "cd":1,
                "id":"C-0033",
                "nm_cliente":"Client Name",
                "num_cnpj":"111.222.3333/0001-22",
                "nm_cidade":"City BBB"
            },
            {
                "cd":2,
                "id":"C-0035",
                "nm_cliente":"jEmpresa teste",
                "num_cnpj":"111.222.3333/0001-22",
                "nm_cidade":"City CCC"
            }
        ]
    }
}

我已经使用jsonlint.com进行验证,我的JSON一切正常。以下是我试图将这些数据调用到我的表格中的方法。

TableA - 客户端类型人

//rest of the code goes here...
"aoColumns" : [
    { "mData": "person.id" },
    { "mData": "person.nm_cliente" },
    { "mData": "person.dt_nasc" },
    { "mData": "person.info" }
]

TableB - 客户类型公司

//rest of the code goes here...
"aoColumns" : [
    { "mData": "company.id" },
    { "mData": "company.nm_cliente" },
    { "mData": "company.nm_cnpj" },
    { "mData": "company.nm_cidade" }
]

我不断收到错误,例如" lenght not defined"

任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:2)

您必须自己参考personcompany数组,而不是项目。更新以演示加载JSON后的初始化以及如何重用和操作选项:

//an options object, some example settings
var options = {
    bPaginate: true,
    sPaginationType: "full_numbers",
    aLengthMenu: [25,50,100,500]
    //etc 
}    

function initialize(json) {
     options.aaData = json.clients.person;
     options.aoColumns = [
           { "mData": "id" },
           { "mData": "nm_cliente" },
           { "mData": "dt_nasc" },
           { "mData": "info" }
        ];

    $("#tableA").dataTable(options);

    options.aaData = json.clients.company;
    options.aoColumns = [
           { "mData": "id" },
           { "mData": "nm_cliente" },
           { "mData": "num_cnpj" },
           { "mData": "nm_cidade" }
        ];

    $("#tableB").dataTable(options);
}

$.getJSON("your.json", function(json) {
   initialize(json);
});

显示如何注入JSON的原始演示 - >的 http://jsfiddle.net/3g5wcyet/

可重复使用的选项演示 - >的 http://jsfiddle.net/bpgvfefd/