Can not map object properties to columns and no data error.
Can not map object properties to columns and no data error.
I have data from server in form:
[
{id: 1, title: 'aaaaaaaaa', visible: 1, created_at: 12345678, user: {name: 'aaaaa aaaaaaaaa', id: 123}},
{id: 2, title: 'bbbbbbbbb', visible: 1, created_at: 12345789, user: {name: 'bbbbb bbbbbbbbb', id: 124}}
]
Then I have a template:
<table :id="id" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Created</th>
<th>Visible</th>
<th>User</th>
<th></th>
</tr>
</thead>
</table>
Then I have an axios call which returns data and call setDataTable(data) which should generate the table.
setDataTable(data) {
this.dataTableObject = $('#dataTable').DataTable({
data: data,
pageLength: 10,
columns: [
{data: 'id'},
{data: 'title'},
{data: 'created_at'},
{data: 'visible'},
{data: 'user'},
],
columnDefs: [
{
sortable: false, // Actions
targets: [-1] // <-- gets last column and turns off sorting
},
{
targets: 1, // Title
render: function ( data, type, row, meta ) {
return data;
}
},
{
targets: 2, // Created at
render: function(data, type, row, meta) {
let date = new Date(data.created_at * 1000);
let day = date.getDate();
let month = date.getMonth() + 1;
let year = date.getFullYear();
let hours = date.getHours();
let minutes = date.getMinutes();
return day +'.'+ month +'.'+ year +' '+ hours +':'+ minutes;
}
},
{
targets: 3, // Visible
render: function(data) {
return data.name;
},
},
]
});
},
The first problem is that dataTables say there are no data. I see in console.log(data) that data are ok.
The second problem is dont know how to map incoming object properties to the table fields with custom renders and filtering.
Can somebody tell me please what id wrong with this dataTables settings?
Thanks for any help.
Answers
Ok I have it. The result set has another level. I missed it. So now it seem it works fine.