Topic: Cannot get Ajax Datatables to work with my API
*_Expected behavior_* Datatables table displayed correctly and populated with json data returned by ajax call.
*_Actual behavior_* If I copy the example code from https://mdbootstrap.com/docs/standard/data/datatables/#section-async-data,the table works as expected (the column headings are displayed and when the response to the ajax call is received, the rows are populated with the json data).If however, I replace the test endpoint (https://jsonplaceholder.typicode.com/users) with my private API, the following happens:
- the column headings are not displayed
- the "no data found" message is displayed briefly
- the rows remain empty
Using the browser developer tools, I have verified that the ajax call returns the json data in the correct format, but even if there was a problem with the json data, the column headings should be displayed.
My API is private, so I can't provide a public endpoint, but I copy here the result of the ajax call performed in the snippet:
[{"name":"CS_OPER_SIR1LRM_0__20221213T012441_20221213T013153_0001.DBL","type":"SIR1LRM_0_","start":"2022-12-13T01:24:40.808499","stop":"2022-12-13T01:31:53.018765","v":"0001"},{"name":"CS_OFFL_STR_ATTREF_20221127T215523_20221129T002322_E001.EEF","type":"STR_ATTREF","start":"2022-11-27T21:55:23","stop":"2022-11-29T00:23:22","v":"E001"},{"name":"CS_OPER_MPL_ORBREF_20220606T002921_20221030T193923_0001.EEF","type":"MPL_ORBREF","start":"2022-06-06T00:29:21","stop":"2022-10-30T19:39:23","v":"0001"},{"name":"CS_OPER_SIR1LRM_0__20220330T084242_20220330T084417_0001.DBL","type":"SIR1LRM_0_","start":"2022-03-30T08:42:41.558449","stop":"2022-03-30T08:44:16.660031","v":"0001"},{"name":"CS_OPER_AUX_DSITNH_20220320T000000_20220320T235959_0001.DBL","type":"AUX_DSITNH","start":"2022-03-20T00:00:00","stop":"2022-03-20T23:59:59","v":"0001"},{"name":"CS_OPER_AUX_DSITSH_20220320T000000_20220320T235959_0001.DBL","type":"AUX_DSITSH","start":"2022-03-20T00:00:00","stop":"2022-03-20T23:59:59","v":"0001"},{"name":"CS_OPER_AUX_IONGIM_20220320T000000_20220320T235959_0001.DBL","type":"AUX_IONGIM","start":"2022-03-20T00:00:00","stop":"2022-03-20T23:59:59","v":"0001"},{"name":"CS_OPER_AUX_GPDWTC_20220319T215523_20220321T002323_0001.DBL","type":"AUX_GPDWTC","start":"2022-03-19T21:55:23","stop":"2022-03-21T00:23:23","v":"0001"},{"name":"CS_OPER_AUX_SURFPS_20220319T120000_20220319T120000_0001.DBL","type":"AUX_SURFPS","start":"2022-03-19T12:00:00","stop":"2022-03-19T12:00:00","v":"0001"},{"name":"CS_OPER_AUX_MOG_2D_20220319T120000_20220319T120000_0001.DBL","type":"AUX_MOG_2D","start":"2022-03-19T12:00:00","stop":"2022-03-19T12:00:00","v":"0001"}]
Resources (screenshots, code snippets etc.)https://mdbootstrap.com/snippets/standard/torroni/5001310#js-tab-view
I have found the reason. The example uses a compact syntax:
const asyncTable = new mdb.Datatable(
document.getElementById('datatable'),
{ columns, },
{ loading: true }
);
which only works if the variable referencing the array of column headings is called "columns". To use a different variable name, the full syntax must be used:
const asyncTable = new mdb.Datatable(
document.getElementById('datatable'),
{ columns: inventoryTableColumns, },
{ loading: true }
);
I suggest to modify the example, using a variable name that is different from the name of the json key expected by the mdb.Datatable function. In the current example, both the variable and the json key are called "columns".
Grzegorz Bujański staff commented 2 years ago
Thanks for reporting. We will consider making this change to the documentation.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 6.1.0
- Device: laptop
- Browser: Brave Browser Version 1.48.167 Chromium: 110.0.5481.104 (Official Build) (64-bit)
- OS: Windows 10 Enterprise 22H2
- Provided sample code: No
- Provided link: Yes