How to effectively and automatically make the datatable data to be reloaded using ajax request ?

declaudefrancois

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown: error: TypeError: Cannot read properties of undefined (reading 'reload')
Description of problem:
I'm using an ajax sourced datatable (from a NodeJS server, which is configured to properly respond to datatable request) with pipeline to reduce the ajax calls to the server, and i have created two actions buttons (delete and update) which open a modal and perform an action (delete or update) to the server and after that the modal is closed. so i want the datatable data to reload when the action is being complete. I'm trying do do it with datatableRef.ajax.reload() but nothing happens , instead i get the error mentioned. But curiously when i log my ref on console, i see an html element whit datatable properties added...

Datatable instanciation

Delete action

Update Action

Console output of the datatable reference and its ajax property

My working datatable

colin

It would be worth looking at Editor - as it would make this support must simpler and easier to integrate,

Colin

declaudefrancois

Hello Mr Colin. Thanks for your answer , very helpful. I will try editor too. In the past (one year ago) I've tried it but I've decided to go with this custom approach because i need more control (perhaps i didn't explored well the customization possibilities offered by editor).
But excuse me sir , I just want to know , Does your answer means that there is no way of updating the datatable with ajax.reload ? Or i am doing something wrong ?

kthorngren

TypeError: Cannot read properties of undefined (reading 'reload')

Start with this FAQ. Basically it says that you have this.tableRef = $(elt).dataTable( ... ) but to use the API you need an upper case D like this this.tableRef = $(elt).DataTable( ... ) or use this.tableRef.api().ajax.reload().

Kevin

declaudefrancois

Hello Mr Kevin. Thank you so much my problem is solved and the reload is now working thanks to you .
Here is the solution i've applied
For datatable initialisation :
this.tableRef = $(elt).DataTable(...);

And to reload the data as i use a pipeline ,
this.tableRef.clearPipeline(); this.tableRef.ajax.reload();