Column filter boxes with saveState are empty after page reload
Column filter boxes with saveState are empty after page reload
Antelion
Posts: 9Questions: 1Answers: 0
Problem
I have activated the stateSave option with the following code:
'stateSave': true,
'stateSaveCallback': function(settings,data) {
localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
},
'stateLoadCallback': function(settings) {
return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
},
'ajax': 'myDataPage.aspx',
When I reload my page the filters are correctly applied but no text appears in the column filter boxes.
If I position the cursor on one of those empty column filter boxes and I press the back button on my keyboard, the filter is resetted.
Previous thread on the topic
https://datatables.net/forums/discussion/68598/column-filters-save-state-cant-remove-text-from-input
My situation
I am not able to apply the solution suggested by Thoniur in the thread I mentioned ("the original problem was solved by putting the filter header row init process into the stateLoadCallback") because it is not clear to me what it is all about.
I have just copied/pasted the default code for the saveState from the reference page: https://datatables.net/reference/option/stateSave
Question
Is there a way to make the text on the column filters appear ?
Thanks
Replies
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
@Antelion , all good?
did you manage to solve the problem with the filters?
Hello,
here is the link to the test case I have created: http://live.datatables.net/hivotamo/1/edit
If you write '200' in the first column filter you get 1 result.
When you refresh the page the 1 result is correctly shown but no text appears in the column filter box.
See if this thread helps.
Kevin
It definitely helped Kevin, thank you.
I have slightly modified the code reported in the thread you mentioned:
I have also applied the changes to the test case http://live.datatables.net/hivotamo/1/edit so that it is now a working example of the solution.
Doesn't look like your changes were saved. It may have generated a new URL with
2at the end or you will need to use the JS Bin menu to clone the test case.Kevin
@kthorngren
I have now cloned the test case here: http://live.datatables.net/hebitaxi/1/edit
Very nice! Thanks for the working example.
Kevin
@kthorngren
Another related question.
Is there a way of making the solution work in case of column filters placed in the header ?
I have created a new test case here: http://live.datatables.net/foqeluvu/1/edit
I changed the line
to
and again the filters are applied but the column filter text does not appear.
You need to update that statement to apply to the second header:
http://live.datatables.net/foqeluvu/2/edit
Kevin
Perfect Kevin, it works, thank you.