Table not showing after fetching data via ajax
Table not showing after fetching data via ajax
19GHD85
Posts: 1Questions: 0Answers: 0
HTML:
<table id="table"
class="table table-striped table-bordered table-condensed w-100"
data-url="/demo/data"
data-columns="{"aaa":{"data":"aaa","title":"aaa","className":"text-left","vertical":false,"link":null},"bbb":{"data":"bbb","title":"bbb","className":"text-left","vertical":false,"link":null},"ccc":{"data":"ccc","title":"ccc","className":"text-left","vertical":false,"link":null},"ddd":{"data":"ddd","title":"ddd","className":"text-left","vertical":false,"link":null}}">
</table>
JavaScript:
const TABLE_SELECTOR = '#table';
const table = document.querySelector(TABLE_SELECTOR);
if (table === null) {
return;
}
const url = table.dataset.url;
let tableColumns = JSON.parse(table.dataset.columns);
tableColumns = Object.keys(tableColumns).map((key) => tableColumns[key]);
console.log(tableColumns);
const dataTable = new DataTable(TABLE_SELECTOR, {
columns: tableColumns,
ajax: url,
deferRender: true,
processing: true,
serverSide: false,
pageLength: 20,
scrollY: '44vh',
scrollX: true,
scrollCollapse: true,
fixedColumns: {
start: 3
},
initComplete: function(settings, json) {
console.log(json);
},
headerCallback: function(thead, data, start, end, display) {
const thCells = thead.getElementsByTagName('th');
tableColumns.forEach((tableColumn, index) => {
const thCell = thCells[index];
if (typeof thCell !== 'undefined') {
if (tableColumn.vertical === true) {
thCell.classList.add('vertical-text');
}
thCell.classList.remove('text-left', 'text-right');
thCell.title = thCell.innerText;
}
});
}
});
Output of console.log(tableColumns);
Array(4) [ {…}, {…}, {…}, {…} ]
0: Object { data: "aaa", title: "aaa", className: "text-left", … }
className: "text-left"
data: "aaa"
link: null
title: "aaa"
vertical: false
1: Object { data: "bbb", title: "bbb", className: "text-left", … }
className: "text-left"
data: "bbb"
link: null
title: "bbb"
vertical: false
2: Object { data: "ccc", title: "ccc", className: "text-left", … }
className: "text-left"
data: "ccc"
link: null
title: "ccc"
vertical: false
3: Object { data: "ddd", title: "ddd", className: "text-left", … }
className: "text-left"
data: "ddd"
link: null
title: "ddd"
vertical: false
Output of console.log(json);
Object { data: (1) […] }
data: Array [ {…} ]
0: Object { aaa: "aaa", bbb: "bbb", ccc: "ccc", … }
aaa: "aaa"
bbb: "bbb"
ccc: "ccc"
ddd: "ddd"
No other output is given in the console and the table is empty.
Replies
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Colin