Can't manage to get bStateSave to work. DataTables 1.8.1

enriquein

Hi there,

I'm pretty new using DataTables, but I feel like I've managed to get a lot of the functionality working great so far. The only thing I can't seem to figure out is saving the state of the table. I'm sure I must be doing something horribly wrong, so here's pretty much what I'm doing.

I have a "search" page where a user enters text into some fields, I use ajax to post the data and then I populate the table with the returned json. The thing is that I have to show the empty table at first, so that could be part of the problem. To elaborate:

HTML file:
[code]
<!-- Some text fields and a submit button that does ajax magic -->

[/code]

Javascript file:
[code]
// I'm doing this part to style the empty table and to make sure the columns are there.
$(document).ready(function() {
$('#searchResults').dataTable({
'aoColumns': [
{ 'sTitle':'Company' },
{ 'sTitle':'Id' },
{ 'sTitle':'Name' },
{ 'sTitle':'Address 1' },
{ 'sTitle':'Address 2' },
{ 'sTitle':'City, State ZipCode' },
{ 'sTitle':'Phone' }
],
'bJQueryUI': true,
"bStateSave": true
});
});

// Then when the button click event fires, a jQuery ajax post is called, and the success function looks like this:
// Note: data and columns are populated with correct data, as it displays it perfectly.
$('#searchResults').dataTable({
'aaData': data,
'aoColumns': columns,
'bJQueryUI': true,
'bProcessing': true,
'sPaginationType': 'full_numbers',
'bDestroy': true,
'bAutoWidth': false,
'bDeferRender': true,
"bStateSave": true
});

// Now the user clicks on a link, decides to hit the "back" button on the browser, and the datatable is empty.
[/code]

That's pretty much the gist of it. Please don't tell me I'm killing the "state" when I'm passing bDestroy.

allan

Its a slightly unusual way of approaching the problem, but quite innovative and should work as far as I can tell. The state isn't killed when you give bDestroy: true, so that shouldn't be a problem... Hmm - I'm not sure of the top of my head I'm afraid. Can you give us a link please?

Allan

enriquein

I'm afraid I can't provide an URL because this is for an intranet website. However I'm curious about what you mean with it being a slightly unusual way of approaching the problem. I'll gladly approach it differently (and in the correct way) if you can point me in the right direction.

Something else I forgot to ask, does this functionality require additional plugins or .js files? Some other UI projects (ie jQuery UI) bundle cookie storing functionality in optional packages and I'm not sure if this functionality comes out of the box with DataTables.

allan

Its just not something we see too often in the forum - create the table and then destroy it with different parameter. It is fair enough, and as I say it should work just fine. A different approach might be to not destroy the table and use the API to add new data (but this wouldn't allow dynamic changing of features), or not initialise it until you've got the information (but that might not allow the styling you want on the table). So it is perfectly fair enough.

DataTables is just one script with no dependancies other than jQuery (not jQuery UI).

Allan

enriquein

Tell you what, I'll see if I can reproduce the behavior in a public environment and let you know. Thanks for helping out.

enriquein

Using FireCookie I can see the cookie being saved by DataTables. However, browsing through the cookie data, I can't seem to find the actual cell values anywhere. Tried looking at the source code, and I can't see where in _fnSaveState the saving of the cell values happens.

enriquein

I changed my code to initialize the table only once and then I add the data through the API and I still can't get it to work. I'm using FireCookie to keep track of the cookie and from what I've seen, the cookie gets stored when I call $('#').dataTable() but doesn't get updated when I call $('#').fnAddData() to include the actual values I added.

Initialization code:
[code]
// done inside a document.ready() block
$('#tblSearch').dataTable({
'aoColumns': [
{ 'sTitle': 'Company', 'sWidth': '60px', 'sClass': 'centered' },
{ 'sTitle': 'Id', 'sWidth': '80px', 'sClass': 'centered' },
{ 'sTitle': 'Name', 'sWidth': '155px' },
{ 'sTitle': 'Address 1', 'sWidth': '155px' },
{ 'sTitle': 'Address 2', 'sWidth': '155px' },
{ 'sTitle': 'City, State ZipCode', 'sWidth': '120px' },
{ 'sTitle': 'Phone', 'sWidth': '105px' }
],
'bJQueryUI': true,
'sPaginationType': 'full_numbers',
'bAutoWidth': false,
'bStateSave': true
});
[/code]

Ajax callback that adds data:
[code]
// Server returned a JSON array of values and put it in 'data'.
$(#'tblSearch').fnClearTable();
$('#tblSearch').fnAddData(data);
[/code]

Am I understanding what this feature does? I'm expecting it to work this way:
- User performs search. Gets search results.
- Results will include links to other areas of the site. The user clicks one and navigates away.
- User decides to go back and check the rest of the results. Clicks on the browser's back button.
- User finds the table with the last results he got.

enriquein

Seems that I fail at reading. The documentation specifies that the state that's being saved only includes sorting, pagination, and table display info. Not the actual data.

Sorry for posting a non-issue. Thanks for your support and for making such an awesome product!

fbas

if you want to save data, look into putting the entire aaData into localstorage objects (javascript construct added for HTML 5 support)

you may have to stringify those arrays

http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage

fbas

In fact, it's probably better for the state saving routines to use localstorage (if it's available, simple javascript test) than cookies.

requires no parsing and sending of cookies over network server -> client, or client -> server