JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<table id="tab1" class='data tab01'>
<thead>
<tr>
<th>id</th>
<th>cat1</th>
<th>cat2</th>
<th>cat3</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JavaScript
$(document).ready(function(){
var call1 = $.ajax({
//url: "https://api.myjson.com/bins/48g56",
//new url where remove {"data": in first line and last }
url:"https://api.myjson.com/bins/12m2o",
type: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8",
});
var call2 = $.ajax({
//url: "https://api.myjson.com/bins/1bfa2",
//new url
url: "https://api.myjson.com/bins/2dzbk",
type: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8",
});
// When both Ajax requests were successful
$.when(call1, call2).done(function(a1, a2){
// a1 and a2 are arguments resolved for the call1 and call2 ajax requests, respectively.
// Each argument is an array with the following structure: [ data, statusText, jqXHR ]
// Append data from call2 to data from call1
// var data = a1[0].data.concat(a2[0].data);
// Insert data from call2 at position 2 of data from call1
//remove .data
//var data = a1[0].data;
var data = a1[0];
//data.splice.apply(data, [2, 0].concat(a2[0].data));
data.splice.apply(data, [2, 0].concat(a2[0]));
// Initialize data table
var t = $("#tab1").DataTable({
data: data,
columnDefs: [
{ className: "hide", "targets": [ 0 ] },
],
order: [],
ordering: false,
columns: [
{ "data": "id"},
{ "data": "cat1"},
{ "data": "cat2"},
{ "data": "cat3"}
]
});
});
});