Hello,
I am having an issue binding data to a datatable when passing in the url to an ajax call.
When running the following code databable 'example' throws this alert twice:
** DataTables warning: table id=example - Requested unknown parameter '0' for row 0, column 0.**
However, if i pass the data directly to the ajax call for datatable 'example2', it works great.
Here is some code that shows a working and non-working example:
JAVASCRIPT
// NOT WORKING
// DataTables warning: table id=example - Requested unknown parameter '0' for row 0, column 0.
$(document).ready(function() {
$('#example').dataTable( {
"ajax": {
"url": "json.data",
"type": "GET",
"cache": true,
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "description" },
{ "data": "createdAt" },
{ "data": "updatedAt" }
],
"complete": function(xhr, status){
console.log(xhr.responseText);
console.log(status);
}
}
} );
// THIS IS WORKING GREAT
$('#example2').DataTable( {
"ajax": "json.data",
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "description" },
{ "data": "createdAt" },
{ "data": "updatedAt" }
]
} );
} );
HTML
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Description</th>
<th>Created</th>
<th>Updated</th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th>Name</th>
<th>Description</th>
<th>Created</th>
<th>Updated</th>
</tr>
</tfoot>
</table>
<table id="example2" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Description</th>
<th>Created</th>
<th>Updated</th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th>Name</th>
<th>Description</th>
<th>Created</th>
<th>Updated</th>
</tr>
</tfoot>
</table>
JSON
{
"data":[
{
"experiments": [
{
"name": "Animation",
"description": "test",
"group": 1,
"createdAt": "2015-10-22T02:10:53.691Z",
"updatedAt": "2015-11-08T03:41:08.173Z",
"id": 2,
"build_number": "1.a.0032",
"url": "experiments/svg/saves.svg"
},
{
"name": "Technical Drawing",
"description": "test",
"group": 1,
"createdAt": "2015-10-31T22:39:31.374Z",
"updatedAt": "2015-11-08T04:05:46.258Z",
"id": 3,
"build_number": "1.a.0033",
"url": "experiments/svg/vacumatic.svg"
},
{
"name": "KeySpline Animation",
"description": "test",
"group": 1,
"url": "experiments/svg/escapement.html",
"build_number": "1.a.0034",
"createdAt": "2015-11-08T04:09:56.049Z",
"updatedAt": "2015-11-08T04:09:56.049Z",
"id": 4
}
],
"name": "SVG (Scalable Vector Graphics)",
"description": "SVG animation tests.",
"createdAt": "2015-10-22T02:05:02.156Z",
"updatedAt": "2015-11-08T03:08:32.662Z",
"id": 1
},
{
"experiments": [
{
"name": "Sails JS",
"description": "Building a restful api with Sails JS",
"group": 2,
"url": "https://api.jptrue.com",
"build_number": "1.a.0035",
"createdAt": "2015-11-10T03:04:31.383Z",
"updatedAt": "2015-11-10T03:22:03.192Z",
"id": 6
}
],
"name": "API (Application Program Interface)",
"description": "API tests.",
"createdAt": "2015-10-22T02:06:55.339Z",
"updatedAt": "2015-11-08T03:09:39.163Z",
"id": 2
},
{
"experiments": [
{
"name": "Dynamically generated alerts",
"description": "test",
"group": 3,
"url": "experiments/bootstrap/alert.html",
"build_number": "1.a.0035",
"createdAt": "2015-11-08T04:40:56.812Z",
"updatedAt": "2015-11-08T04:40:56.812Z",
"id": 5
}
],
"name": "Bootstrap",
"description": "Scalable Vector Graphics",
"createdAt": "2015-10-31T22:38:50.180Z",
"updatedAt": "2015-11-08T04:39:37.239Z",
"id": 3
}
]
}
Any ideas on fixing this issue are greatly appreciated.
Thanks,
Jeff
