localStorage for state saving and updates in 1.9
localStorage for state saving and updates in 1.9
allan
Posts: 63,602Questions: 1Answers: 10,486 Site admin
Hello all,
I've just posted a new blog entry describing the state changing API changes that are in DataTables 1.9 and showing how the new state saving API can be used very easily for saving your table's state with localStorage: http://datatables.net/blog/localStorage_for_state_saving .
Enjoy,
Allan
I've just posted a new blog entry describing the state changing API changes that are in DataTables 1.9 and showing how the new state saving API can be used very easily for saving your table's state with localStorage: http://datatables.net/blog/localStorage_for_state_saving .
Enjoy,
Allan
This discussion has been closed.
Replies
http://datatables.net/beta/1.9/examples/advanced_init/localstorage.html throws an error localstorage is undefined... looks gr8 on FF and chrome... waiting to get my hands on the new state saving functions
> waiting to get my hands on the new state saving functions
Already available in 1.9.0 :-)
Allan
This small plugin uses flash, gears, localstorage, whatwg_db, globalstorage, cookie, etc. transparently.
Example:
[code]
var store = new Persist.Store('My Data Store');
var data = "pretend this is really long data that won't fit in a cookie";
store.set('saved_data', data);
[/code]
Unfortunately, the get() method is... peculiar in that it is asynchronous (the reason being, I quote, "It turns out that some backends -- specifically the WHATWG Database (used for Safari 3.1) -- only function asynchronously, so using a callback function is the only reliable means of ensuring the correct order of operations").
Example:
[code]
store.get('saved_data', function(ok, val) {
if (ok)
alert('saved data = ' + val);
});
[/code]
I was wondering if you could advise me how I could make that work with fnStateLoad()? fnStateLoad is a callback, from which you return a value. The issue is that from that callback I will need to call get() itself with an anonymous/async function, from which I can't quite return anything in the same scope.
Recommendations?
Thanks!
That's very unfortunate because at the moment DataTables requires that the state loading function give be synchronous - there is currently no callback method available for this function at the moment. Changing it could of course be done, but its not trivial in the DataTables core since the constructor is expecting the function to be synchronous.
The only option I've really got to suggest, without changing the DataTables core (which of course I am willing to do, but it will take a bit of time), is to load your settings object first, then initialise your DataTable on the callback. Then you can use fnStateLoad to return the object that was loaded. The only downside is that the table will be uninitialised for that extra period of time while the state is being loaded.
Allan
http://www.jstorage.info/
"fnStateLoad": function (oSettings) {
var o;
// Send an Ajax request to the server to get the data. Note that
// this is a synchronous request.
$.ajax( {
"url": "/state_load",
"async": false,
"dataType": "json",
"success": function (json) {
o = json;
}
} );
return o;
}
} );
This is a bug in the docs which is fixed in the git repo, but because the docs are tired to each release, it will be the 1.9.1 before the docs on the site are updated.
> I have checked my object o that is returned at the end and it looks ok
That looks okay to me as well - can you link me to your page please, so I can see what might be happening.
> Also I'm wondering if I need to do anything extra to have the table remember column order etc with the plugins on the table or if I can just return the serialized oData object and the plugins will know what to do with it.
Assuming the state loading works okay, then the ColReorder plug-in should deal with restoring state, since it hooks into the DataTables state saving API.
Allan
http://airtime-dev.sourcefabric.org/ here is a public dev version of the site. The table I'm trying to save/load using a db storage is on the page "playlist builder" The fnSaveState and fnLoadState are written in library.js starting around line 226.
Thanks again if you could take a look at it!
oData.abVisCols it gives you an array like ["true", "false"], but to actually load properly the values need to be actual booleans [true, false] etc or of course it was just thinking "false" was actually true so I always got all my columns loading.
Allan
Anyway - great to hear you've got it sorted out!
Regards,
Allan
Allan
Allan
So now I'm trying to change this to localStorage, but my DataTable isn't storing the external filters (which I have created manually and I'm using them with aoData.push method). How can I make the DataTable to store these filters too?
Thanks
Sounds like the cookie is too large - there should be protection in DataTables to stop that, but 4KiB isn't much - if you have a lot of columns then it can overflow.
> my DataTable isn't storing the external filters
DataTables will store column filters applied by fnFilter (is that what you are using?), but it won't restore them, since it knows nothing about your input controls. You would need to use fnStateLoadParams to get the saved parameters and display them in the document.
Allan
Is there a way that I can solve the problem of the error 502 without change the entire system to localStorage? Or change is the best workaround?
Thanks
Thiago
How many columns do you have in your table? As I say, DataTables should have protection code that stops it breaking, but it sounds like there might be a bug in there.
Allan
Otherwise, I'll change my application to use this localStorage functionality.
Thanks for the help.
Thanks
Forget it, I found it is persitent until I delete or the user clean it.
Thanks
Allan
Given the HTML
[code]...
...[/code]
And the JS
[code]$('.datatable').dataTable({ /* initialization */ });[/code]
How do I access "some_id" and "some_other_id" from within the initialization code?
var id = table.fnSettings().sTableId;
[/code]
It is worth noting that the parameters in fnSettings are considered private, and generally shouldn't be used as they might change in future... v1.10 is going to introduce a new public API to make this kind of thing easier. But until then, this is how to do it.
Allan
[code]var oTable = $('table.datatable').dataTable({
bStateSave: true,
fnStateSave: function(oSettings, oData) {
localStorage.setItem('DataTables_' + this.fnSettings().sTableId, JSON.stringify(oData));
},
fnStateLoad: function (oSettings) {
return JSON.parse(localStorage.getItem('DataTables_' + this.fnSettings().sTableId));
}
});[/code]
However, I ran into a little problem with the new plugin LengthLinks. Whenever one chose to display "All" rows, left the page and came back, the length control was not rendered at all. This only happened with state saving enabled, and only with LengthLinks, not if one used the regular length control. I commented out the following lines in the plugin and that fixed the problem:
[code]$.fn.dataTable.LengthLinks = function ( oSettings ) {
var container = $('').addClass( oSettings.oClasses.sLength );
var lastLength = -1;
var draw = function () {
// No point in updating - nothing has changed
// if ( oSettings._iDisplayLength === lastLength ) {
// return;
// }
/* ... rest of plugin ...*/
}[/code]
If you made the plugin public, you might want to take a quick look at the logic there. It seems my quick fix could come with a slight performance penalty.