Can't manage to get bStateSave to work. DataTables 1.8.1
Can't manage to get bStateSave to work. DataTables 1.8.1
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.
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.
This discussion has been closed.
Replies
Allan
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.
DataTables is just one script with no dependancies other than jQuery (not jQuery UI).
Allan
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.
Sorry for posting a non-issue. Thanks for your support and for making such an awesome product!
you may have to stringify those arrays
http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage
requires no parsing and sending of cookies over network server -> client, or client -> server