Side effects while reloading data using "The Angular way"

[bethnull]

Hi,

I'm observing a refresh/update problem while using the component in the "angular way", it seems that the component is storing an internal copy of the data and if I update the original source variable I got a table with the content of the new and old rows.

The behaviour is strange as if I update the variable used for the datatable the showed results are fine, however as soon as I search or sort a column the old data appears out of the blue and if the set is updated again I got the new rows at the beginning and the old ones at the end, after that if I search only the old data is displayed.

Maybe there is a way of clearing the table prior update or something similar I'm skipping.

Thanks for your support.

[l-lin]

Yes, I'm aware of this problem.
Currently, it's not possible to reload the data using the angular way (except if you re-render the DataTable). Otherwise, you notice the strange behaviour you just described.
This issue is quite challenging since the datatable needs to know when the data has changed, needs to save somehow the pagination, the filter, and so on...
I still don't know how to solve it. I'm trying to find a way so that we can integrate new data and change existing data seamlessly.

[kirstu]

I'm also having problems reloading the DataTable with different kind of data.

So, how would one go about re-rendering the DataTable in this case?

[l-lin]

Well, you will need to use Datatable destroy() function.
Here an example on Plnkr.

However, as you might notice, the filter, pagination, search value are all reset since the DataTable is destroyed. So, it's not really a good solution. 😞

[prateem]

I'm using a server side implementation and I have to re-draw my DT when I update my server data. Perhaps that could be a solution - to re-draw it? Here's how I do it ($scope._redraw, near the bottom of the image):

Just pitching in to see if I can help.

[l-lin]

Sadly, redrawing does not solve the problem (in the case we render using the "Angular way"). It would display the new data, but when you try to sort, filter or search, it will display the old data, like the op described.

[bethnull]

Hi, sorry for answering back so late.

As a temporary fix I'm using your suggestion of re-rendering/destroy() the component. It's not the ideal solution but for the meantime it's better than displaying wrong data.

I appreciate the effort you're doing in adapting the DataTables to AngularJS, thanks for it and keep going ;).

All the best, beth.

[l-lin]

I managed to solve the issue. Please check the gh-pages for more information.