Question

我有来自服务器的JSON响应，如下所示，

{
    "data": [{
        "id": 1,
        "apiKey": "test1",
        "name": [{
            "identifier": "1",
            "status": "Online",
        },
        {
            "identifier": "2",
            "status": "Online",
        }]
    },
    {
        "id": 2,
        "apiKey": "test2",
        "name": [{
            "identifier": "1",
            "status": "Online",
        },
        {
    "identifier": "2",
            "status": "Online",
        }]
    }]
}

数据表应该有两行id 1。 E.g。

ID      name    status
1       1       Online
1       2       Online
2       1       Online
2       2       Online

在下面找到我的jquery / javascript代码，

 $.ajax({
    url : "url",
    type : "GET",
    contentType : "application/json",
    dataType : "json",
    success : function(response, textStatus, jqXHR) {
        var data = response.data;
        if( data != null ){
            $(data).each(function(i) {
                var data1 = data[i]["name"];
                    oTable = $("#exampletable").DataTable({
                    "bFilter" : false,
                    "searching" : false,
                    "bLengthChange" : false,
                    bJQueryUI : true,
                    aaData : data1,
                    aoColumns : [
                        { mData : data[i]["id"]},
                        { mData : "identifier"},
                        { mData : "status"},
                        { mData : null,
                            "render" : function(mData,type,row) {
                                var mData = "<a href=\"downloads/"+row.Version+"\">DOWNLOAD</a>";
                                return mData;
                            },
                        } ]
                    });
            }); 
        }
    }
});

1）第一栏＆＃34; ID＆＃34;值不显示

2）只有第一个只有两行的对象才会显示4行。

任何帮助将不胜感激。提前谢谢。

Answer 1

由于您希望根据嵌套数组重复项目，因此必须重新组织JSON并将重组后的JSIN传递回DataTables。这是一个例子：

var table = $('#example').DataTable({
   ajax: {
     url: 'https://api.myjson.com/bins/n6wrn',
     dataSrc: function(d) {
       var data = [];
       d.data.forEach(function(f) {
         //repeat, insert new "rows" for each of the nested array items
         data.push( $.extend({ id: f.id }, f.name[0] ))
         data.push( $.extend({ id: f.id }, f.name[1] ))
       })
       return data
     }
   },
   columns: [
     { title: 'id', data: 'id' },
     { title: 'identifier', data: 'identifier' },
     { title: 'status', data: 'status' }
   ]
})

如果可以避免，请不要使用自己的ajax。内置ajax的DataTables与jQuery ajax完全相同，除了它提供了额外的功能，旨在处理针对DT的响应。

<强> http://jsfiddle.net/ahewatux/

根据内部数组绘制jquery数据表行

1 个答案: