Column filter boxes with saveState are empty after page reload

Column filter boxes with saveState are empty after page reload

AntelionAntelion 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

  • colincolin Posts: 14,439Questions: 1Answers: 2,459

    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

  • ivinsonivinson Posts: 1Questions: 0Answers: 0

    @Antelion , all good?

    did you manage to solve the problem with the filters?

  • AntelionAntelion Posts: 9Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 16,747Questions: 25Answers: 3,966

    See if this thread helps.

    Kevin

  • AntelionAntelion Posts: 9Questions: 1Answers: 0
    edited June 27

    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.

  • kthorngrenkthorngren Posts: 16,747Questions: 25Answers: 3,966

    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

  • AntelionAntelion Posts: 9Questions: 1Answers: 0

    @kthorngren

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

  • kthorngrenkthorngren Posts: 16,747Questions: 25Answers: 3,966

    Very nice! Thanks for the working example.

    Kevin

  • AntelionAntelion Posts: 9Questions: 1Answers: 0

    @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.

  • kthorngrenkthorngren Posts: 16,747Questions: 25Answers: 3,966

    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

  • AntelionAntelion Posts: 9Questions: 1Answers: 0
    edited June 28

    Perfect Kevin, it works, thank you.

Sign In or Register to comment.