How do you reload a table?

SatanFatalityz

Link to test case:
Debugger code (debug.datatables.net):

function findJobRecords(searchMode){
        if(searchMode=="All Jobs"){
            
            $('table.tbljobrecords').dataTable({
                ajax:{
                    url:'http://localhost:8081/timescalealpha/src/php/quickjobfinder.php?searchMode='+searchMode+'',
                    dataSrc:''
                },
                columns:[
                    {title:'Job Number:',data:'jobnumber'},
                    {title:'CX Name:',data:'cxname'},
                    {title:'Job Description:',data:'jobdesc'},
                    {title:'Status:',data:'jobstatus'},
                    {title:'City:',data:'city'},
                    {title:'State:',data:'state'},
                ]
            });
        }else if(searchMode=="Active"||searchMode=="Not Active"){
            let showjobreclass=new quickjobsearch(searchMode);
            let returnData=showjobreclass.findactivejob();
            $("#tbljobrecords").html(returnData[0]);
        }
    };

Error messages shown:
DataTables warning: table id=DataTables_Table_0 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
Description of problem:
I am trying to load the table, and if the user choose option 1 again it reload the same table or replaces the table from option 2.

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Did you follow the steps at the link provided in the error?
http://datatables.net/tn/3

You can use ajax.reload() to reload the table via Ajax.

If you want to reinitialize the Datatable then you will need to use destroy() or option destroy to reinitialize a new configuration.

Kevin

SatanFatalityz

@kthorngren Yes I did, follow it, and it gave JS errors in console, saying that it was not a function.

I am having an issue with ajax.reload and getting the error:
caught TypeError: Cannot read properties of undefined (reading 'aDataSort')

tangerine

What "was not a function"??

SatanFatalityz

If anyone else is having this issue: I found the answer here:
https://stackoverflow.com/questions/29150480/how-to-reinitialize-datatables-with-newly-fetched-data-from-server-using-ajax-in

add destroy:true to your table creation, will allow you to destroy the table and make a new one with new data or the same data.

function findJobRecords(searchMode){
if(searchMode=="All Jobs"){
$('#tbljobrecords').DataTable({
destroy:true,
ajax:{
url:'http://localhost:8081/timescalealpha/src/php/quickjobfinder.php?searchMode='+searchMode+'',
dataSrc:''
},
columns:[
{title:'Job Number:',data:'jobnumber'},
{title:'CX Name:',data:'cxname'},
{title:'Job Description:',data:'jobdesc'},
{title:'Status:',data:'jobstatus'},
{title:'City:',data:'city'},
{title:'State:',data:'state'},
]
});
}else if(searchMode=="Active"||searchMode=="Not Active"){
let showjobreclass=new quickjobsearch(searchMode);
let returnData=showjobreclass.findactivejob();
$("#tbljobrecords").html(returnData[0]);
}
};

allan

$('table.tbljobrecords').dataTable({

You might be running into this FAQ.

Allan

SatanFatalityz

@tangerine it was saying the .reload or .destroy was not a function.

allan

Impossible to say without a test case, but I would be a bit surprised if my answer wasn't the correct one.

Allan