Datatables - 2 different json sources together

Question

I have 2 datatables jsfiddle with 3 json sources. It works very well.

But I need change all json files:

Original:

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

New: removed {"data": in first 2 lines and last }

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

I hope if remove .data in jsfiddle, and changed "ajax": url to:

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

it will be works.

Original:

$.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"}
     ]
  });
}

New:

$.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"}
         ]
      });
   }

Problem is, that it works with warning in jsfiddle:

Please use POST request

If I test this file locally warning is:

DataTables warning: table id=tab11 - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

There is a syntax error in jsFiddle, otherwise your code works, see https://jsfiddle.net/xwp3jhq1/1/ — Gyrocode.com, Apr 15 '16 at 11:59
Yes, it seems this separately works. But together only with warning. And I only need remove warning. Maybe the best is testing [file](https://www.dropbox.com/s/c6suvymg13dmuy8/so.html) locally. — jezrael, Apr 15 '16 at 12:03

score 2 · Accepted Answer · answered Apr 15 '16 at 12:19

You cannot provide both ajax and data options in drawTable1 function.

Use the code below instead:

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));
}

Super, it works very well. You can upvote question too. Thank you. — jezrael, Apr 15 '16 at 12:29

Datatables - 2 different json sources together

1 Answers1