Column filter boxes with saveState are empty after page reload

Antelion

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

colin

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

ivinson

@Antelion , all good?

did you manage to solve the problem with the filters?

Antelion

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.

kthorngren

See if this thread helps.

Kevin

Antelion

It definitely helped Kevin, thank you.
I have slightly modified the code reported in the thread you mentioned:

'stateLoadParams':   function(settings, data)
                            {
                                for (i = 0; i < data.columns["length"]; i++)
                                {
                                    var col_search_val = data.columns[i].search.search;
                                    if (col_search_val != "")
                                    {
                                        $("input", $("tfoot th")[i]).val(col_search_val)
                                    }
                                }
                            },

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.

kthorngren

Doesn't look like your changes were saved. It may have generated a new URL with 2 at the end or you will need to use the JS Bin menu to clone the test case.

Kevin

Antelion

@kthorngren

I have now cloned the test case here: http://live.datatables.net/hebitaxi/1/edit

kthorngren

Very nice! Thanks for the working example.

Kevin

Antelion

@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

$("input", $("tfoot th")[i]).val(col_search_val)                    

to

$("input", $("thead th")[i]).val(col_search_val)

and again the filters are applied but the column filter text does not appear.

kthorngren

You need to update that statement to apply to the second header:

$("input", $("thead tr:eq(1) th")[i]).val(col_search_val)

http://live.datatables.net/foqeluvu/2/edit

Kevin

Antelion

Perfect Kevin, it works, thank you.