数据表 - 两个不同的json源一起

时间:2016-04-15 09:27:39

标签: javascript jquery arrays json datatables

我有2个数据表jsfiddle,其中包含3个json来源。它works非常好。

但我需要更改所有json个文件:

原件:

{
    "data": [{
        "id": "11",
        "cat1": "add1.1",
        "cat2": "add1.2",
        "cat3": "add1.3"
    }, {
        "id": "12",
        "cat1": "add2.1",
        "cat2": "add2.2",
        "cat3": "add2.3"
    }]
}

新功能:已删除前2行和{"data":

中的}
[{
    "id": "11",
    "cat1": "add1.1",
    "cat2": "add1.2",
    "cat3": "add1.3"
}, {
    "id": "12",
    "cat1": "add2.1",
    "cat2": "add2.2",
    "cat3": "add2.3"
}]

我希望删除jsfiddle中的.data,并将"ajax": url更改为:

"ajax": {
    "url": url,
    "dataSrc": ""
},

它会起作用。

原件:

$.when(call1, call2).done(function(a1, a2){
        var data = a1[0].data;
        data.splice.apply(data, [2, 0].concat(a2[0].data));
        drawTable("#tab1","",data)
    }); 

drawTable("#tab2","https://api.myjson.com/bins/4lpow","")

function drawTable(id, url, data) {
    $(id).dataTable( {
     "ajax": url,
     data: data,
     columnDefs: [
        { className: "hide", "targets": [ 0 ] },
     ], 
     order: [],
     ordering: false,        
     columns: [
        { "data": "id"},
        { "data": "cat1"},
        { "data": "cat2"},
        { "data": "cat3"}
     ]
  });
}

新:

$.when(call1, call2).done(function(a1, a2){
        //removed .data
        var data = a1[0];
        //removed .data
        data.splice.apply(data, [2, 0].concat(a2[0]));  
        drawTable1("#tab11","",data)
    }); 

drawTable1("#tab21","https://api.myjson.com/bins/3tuls","")

function drawTable1(id, url, data) {
        $(id).dataTable( {
        "ajax": {
            "url": url,
            "dataSrc": ""
        },
         data: data,
         columnDefs: [
            { className: "hide", "targets": [ 0 ] },
         ], 
         order: [],
         ordering: false,        
         columns: [
            { "data": "id"},
            { "data": "cat1"},
            { "data": "cat2"},
            { "data": "cat3"}
         ]
      });
   }

问题是,它适用于jsfiddle中的警告:

  

请使用POST请求

如果我测试这个file本地警告是:

  

DataTables警告:table id = tab11 - 无效的JSON响应。有关此错误的详细信息,请参阅http://datatables.net/tn/1

1 个答案:

答案 0 :(得分:2)

您无法在ajax函数中同时提供datadrawTable1选项。

请改用以下代码:

function drawTable1(id, url, data) {
    var opt;
    if (url !== "") {
        opt = {
            ajax: {
                url: url,
                dataSrc: ""
            }
        };
    }
    if (data !== "") {
        opt = {
            data: data
        }
    }

    $(id).dataTable($.extend({
        columnDefs: [{
            className: "hide",
            targets: [0]
        }, ],
        order: [],
        ordering: false,
        columns: [
            { "data": "id"},
            { "data": "cat1"},
            { "data": "cat2"},
            { "data": "cat3"}
        ]
    }, opt));
}