Datatable data attribute unable to access the datasource variable
Datatable data attribute unable to access the datasource variable
harshdeep
Posts: 6Questions: 2Answers: 0
I am trying to read value out of an xlsx file and display it on a Datatable. Using ALASQL for the reading purpose.
JS --
var ds2;
alasql.promise('select * from xlsx("D:\\Prod Comp\\Test\\Test.xlsx",{headers:true})').then(function(res){
ds2 = JSON.stringify(res);
checkResults();
console.log(ds2);
})
var checkResults = function () {
console.log(ds2);
$(document).ready(function() {
$('#example').DataTable( {
data: ds2,
columns: [
{ data: 'FirstName'},
{ data: 'MiddleName'},
{ data: 'LastName'},
{ data: 'Age'}
],
columnDefs: [{
"defaultContent": "-",
"targets": "_all"
}]
} );
} );
}
HTML --
<html>
<head>
<link href="jquery.dataTables.min.css" rel="stylesheet">
<script src="jquery-1.12.4.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alasql/0.4.5/alasql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.12.12/xlsx.core.min.js"></script>
<script src="dt.js"></script>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>FirstName</th>
<th>MiddleName</th>
<th>LastName</th>
<th>Age</th>
</tr>
</thead>
<tfoot>
<tr>
<th>FirstName</th>
<th>MiddleName</th>
<th>LastName</th>
<th>Age</th>
</tr>
</tfoot>
</table>
</body>
</html>
I am able to print value of variable DS2 on console as following and this looks proper JS object array -
[
{"FirstName":"XYZ","MiddleName":"Singh","LastName":"ABC","Age":00},
{"FirstName":"XYZ","MiddleName":"Singh","LastName":"ABC","Age":00},
{"FirstName":"XYZ","MiddleName":"Singh","LastName":"ABC","Age":00},
{"FirstName":"XYZ","MiddleName":"Singh","LastName":"Chouhan","Age":00}
];
When I am passing above values directly in Data tab, datatable is displaying it properly, but not with the variable.
But somehow Datatable is not displaying data and instead treating all as NULL. I am not sure why the variable DS2 is getting NULL when it goes inside the Table call. Please suggest.
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
It looks like you are encoding the response into JSON with
ds2 = JSON.stringify(res);then usingcolumns.datato load the data. You should leave as a Javascript array instead.Kevin
Thanks @kthorgen, this fixed the issue. Using JavaScript array as it is worked.