Reload datatable when changing dtOptions

In my context, I have a search form. When you submit this form, the client will send an ajax request to retrieve result rows. Once this rows are client-side, I create a datatable and I’m playing around with the rows inside fnServerData.

Basically I have something like this:

self.searchButtonClick = function() {
    myService.getData(myCriteria).then(function(rows) {
        self.dtColumnDefs = [ ... ];
        self.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('fnServerData', function (sSource, aoData, fnCallback) {
                // Do some work with rows and aoData
                fnCallBack(json);
        });
    }
}

The first search works great. When I submit a second time, I retrieve well the result rows from the server, but rewrite dtOptions is not enough to update the datatable content.

I would like to erase and recreate the datatable each time the user submit the form.

I tried to do it using this link but I don’t understand it well.

[l-lin]

The API reloadData and rerender are from the DTInstance. For example:

var self = this; // I suppose
var dtInstance;

self.searchButtonClick = function() {
    myService.getData(myCriteria).then(function(rows) {
        self.dtColumnDefs = [ ... ];
        self.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('fnServerData', function (sSource, aoData, fnCallback) {
                // Do some work with rows and aoData
                fnCallBack(json);
        });
    }
}

self.doSomething = function() {
    // ...

    // This will resend the data to the server
    dtInstance.reloadData();
    // If you want to rerender your table, you can use the following.
    // This will redraw completly. This does not necessarly resend the data.
    dtInstance.rerender();
};

DTInstances.getLast().then(function(inst) {
    dtInstance = inst;
});

[pidupuis]

Thanks, it works!

Final code:

var self = this;
var dtInstance;

self.searchButtonClick = function() {
    myService.getData(myCriteria).then(function(rows) {
        self.dtColumnDefs = [ ... ];
        self.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('fnServerData', function (sSource, aoData, fnCallback) {
                // Do some work with rows and aoData
                fnCallBack(json);
        });
        if(dtInstance) {dtInstance.rerender();}
    }
}

DTInstances.getLast().then(function(inst) {
    dtInstance = inst;
});