Struggling to Refresh data in table via URL

dtabnewb

Hello,
I'm hoping someone can point me in the right direction as I'm struggling conceptually and practically.

When I try and reload data into an already instantiated table I'm receiving the error:

DataTables warning: table id=indices - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

Now, I get that I'm seeing this error because the table is already instantiated.

But - what I can't work out is how to load my new data into the table (I've tied a function to an onchange event with a datepicker).

I've looked through the help pages and tried with reload etc but I'm obviously missing something as I haven't been able to get new data.

I've attached a text file with the basic code inside that I'm using. Like I said it pulls the data ok and renders it.

It's attempting to refresh the data that is causing issues.

dtabnewb

I somehow didn't get all of the code in that last attachment. Uploaded again.

tangerine

Your DataTable initialization is inside a function, which is called twice. Hence "Cannot reinitialise...".

dtabnewb

Hi Tangerine,
thanks for responding. This is where conceptually I'm missing the point (I realise I'm initialising the table again but I ca't figure out how to refresh it).

I need to call the URL with new parameters to get the new data so I'm trying to pass them to it.
I'm missing that logical link on how to call the URL again with the new parameters and supply that new data to the table.

tangerine

   function getIndexData(indexDate, indexCurrency) {
        ajaxURL = "/indices/data/"+indexDate+"/closeprice/"+indexCurrency+"";

        $('#indices').DataTable( {
            dom: 'Bfrtip',
            "buttons": [
                'copy', 'excel', 'pdf', 'csv'
            ],
            "paging": false,
            "responsive": true,
            "ordering": false,
            "searching": false,
            "ajax": {
                "url": ajaxURL,
...

You certainly need to detach your DT initialization from "getIndexData()".
Then you could have your function construct your url and make it visible (global) for use by DT's "ajax:" options.
There are probably neater ways - i'm no expert. But maybe once you get looking at it differently, you'll see a solution.

kthorngren

There are many ways to update a Datatable with new data. The first question is whether the Datatable init options need to change to match the new data. If yes then you will need to use destroy() as described in the tech note link provided in the error.

If the DT config stays the same then as Tangerine says, you should move you Datatable init code outside of the function and execute it once. One option is to use AJAX within the function and in the success portion use clear() to clear the current data and rows.add() to add the new data.

Kevin