Table not showing after fetching data via ajax

19GHD85

HTML:

<table id="table"
    class="table table-striped table-bordered table-condensed w-100"
    data-url="/demo/data"
    data-columns="&#x7B;&quot;aaa&quot;&#x3A;&#x7B;&quot;data&quot;&#x3A;&quot;aaa&quot;,&quot;title&quot;&#x3A;&quot;aaa&quot;,&quot;className&quot;&#x3A;&quot;text-left&quot;,&quot;vertical&quot;&#x3A;false,&quot;link&quot;&#x3A;null&#x7D;,&quot;bbb&quot;&#x3A;&#x7B;&quot;data&quot;&#x3A;&quot;bbb&quot;,&quot;title&quot;&#x3A;&quot;bbb&quot;,&quot;className&quot;&#x3A;&quot;text-left&quot;,&quot;vertical&quot;&#x3A;false,&quot;link&quot;&#x3A;null&#x7D;,&quot;ccc&quot;&#x3A;&#x7B;&quot;data&quot;&#x3A;&quot;ccc&quot;,&quot;title&quot;&#x3A;&quot;ccc&quot;,&quot;className&quot;&#x3A;&quot;text-left&quot;,&quot;vertical&quot;&#x3A;false,&quot;link&quot;&#x3A;null&#x7D;,&quot;ddd&quot;&#x3A;&#x7B;&quot;data&quot;&#x3A;&quot;ddd&quot;,&quot;title&quot;&#x3A;&quot;ddd&quot;,&quot;className&quot;&#x3A;&quot;text-left&quot;,&quot;vertical&quot;&#x3A;false,&quot;link&quot;&#x3A;null&#x7D;&#x7D;">
</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.

colin

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