Update row cache values?

keeger

I am using Datatables 1.10, with serverSide true.

I have a situation where the user can click an icon in a row and change a value. When they are finished changing it, i use the DataTable().row().data() to save the new value.

However, the original value is cached, and if I make a subsequent call to DataTable().row().data() i receive the cached value.

The only way I have found in the documentation is to call draw() to refresh the cache. I would like to avoid this, because I want to do a simple animation (highlight) and don't want the table to re-fetch from the server and redraw.

is there a way to update the cached value without calling draw? invalidate will flag it as dirty, but it still won't update until after draw() is called.

If not, can we add a feature request for this? maybe a refreshCache() method that pushes the current objects into the cache spot?

Thanks

keeger

I actually found a work around for this. thought I'd update and share.

I just defined a boolean, doNotCallServer = false.

in the table
js "preDrawCallback": function(oSettings) { if (doNotCallServer) { doNotCallServer = false; //reset it. return false; //cancel ajax request if told to. } } js

in the code that modifies the row data, after you finish modifying it, set doNotCallServer = true, and call table.draw().

Simple enough and it works!

allan

If you are using server-side processing, the client-side update methods aren't likely to be of much use. It does incur an extra ajax call to update the data, but that is one of the tradeoffs made for server-side processing.

Allan

keeger

allan,

for the most part this is true, however I had a situation where the users could update a row in the grid, via a popup. The popup would save to the server via ajax, and we wanted to do a UI effect on the updated row. the serverside processing makes this difficult, because we have to store the row to "flash" and do the draw() command, and then re-find the row again, and then perform the animation on it.

This is slowish and involves another database hit, and we have the data already in the javascript, so we just wanted to update the table live, so to speak.

the preDrawCallback workaround above works a lot easier, but I guess I wonder what is so bad about allowing the client to update the cached data, even when it is in Server side mode?

allan

DataTables is designed such that when server-side processing mode is enabled the data always must come from the server. The cached local values are redundant since they are never used - sorting, filtering etc are all performed at the server-side so updating them wouldn't serve any purpose.

What you could do is write directly to the HTML for the cell which would update the row visually. DataTables wouldn't see that, but that would be okay I guess, since it never uses it.

Allan

renatoargh

I am having the very same problem! My scenario is that I have a context menu (it shows up when the user clicks a row) and one of the options of this menu is to activate or deactivate that specific record in the database.

After clicking the button I perform an ajax request that updates the db, I then update the row with DataTable().row().data(data) which works great. So data now has the value of the property active equals false.

Next time the user clicks the same row the context menu shows up with an option to deactivate because even though HTML for that row updated correctly the cache still has the old version of data.

I tried @keeger workaround but the old value was still there!!! Your code only prevented datatables to perform the request but kept the exact same value in cache.

I also agree that this would be a killer new feature in order to create a more nice user experience!

Thank you very much Allan, for the great work! :)

renatoargh

@keeger I got your solution to work!!! Basically I did;

var noAjaxPlease = false;

var table = $('table.dataTable').DataTable({
    preDrawCallback: function() {
        if(noAjaxPlease) {
            noAjaxPlease = false;
            return false;
        }

        return true;
    },
    rowCallback: function(row, data) {
        //attaches click event to row, show contextMenu, get new data then;
        data = newData;
        table.row(row).data(newData);
        table.draw();
    }
});

Thank you guys