Javascript Question
DataTable is not populated when data is returned
I have many datatables on my page and i have a generic method which populates them, and they all work fine apart from one.
My ajax method is as follows:
function AjaxGet(url, tableName) {
$.ajax({
method: 'GET',
url: url,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function (data) {
$('#' + tableName).dataTable({
destroy: true,
'bPaginate': false,
'aoColumns': DetermineColumns(tableName),
'aaData': data,
'sDom': '<"top">t<"bottom"><"clear">',
'bSort': false
});
}
});
};
I know that the URL and the table name fed in are correct.
My data looks like the following when i debug in developer tools:
The DetermineColumns function contains if..else.. checks until it finds the right table name, which it successfully does, and then returns the following into
aoColumnsreturn [
{
'mDataProp': 'PartNum'
},
{
'mDataProp': 'ukstk'
},
{
'mDataProp': 'ukfob'
},
{
'mDataProp': 'de'
},
{
'mDataProp': 'fr'
},
{
'mDataProp': 'es'
},
{
'mDataProp': 'ae'
},
{
'mDataProp': 'usa'
},
{
'mDataProp': 'mx'
},
{
'mDataProp': 'jx'
}
];
And here is my HTML table:
<div class="row">
<div class="col-md-6">
<table id="stdCostTable" class="table input">
<thead>
<tr>
<th></th>
<th>
UK-STK
</th>
<th>
UK-FOB
</th>
<th>
DE
</th>
<th>
FR
</th>
<th>
ES
</th>
<th>
AE
</th>
<th>
USA
</th>
<th>
MX
</th>
<th>
JX
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
Please can somebody help to work out why the datatable in question is not being populated?
Thanks!
I also do not receive any errors from console or debugger. As far as datatables is concerned, there is no data and therefore, initialises it correctly displaying the message "No data available in table" but the data is in the 'data' object when it is assigned to 'aaData'.
Answer Source
I think data should be an array of objects (or arrays), not an object per se. Check the initialization example (I assume you're using a legacy version)