filter parameter save and load on refresh/back button use case

filter parameter save and load on refresh/back button use case

kvvchettykvvchetty Posts: 2Questions: 1Answers: 0

can you please give an example code in 1.10.19 to see, saveState = true, saveparameters and loadparameter on back-button click.

I have this option set in my datatable. From the list, I have a filter for few columns, I enter some value to pick few entries. I select a row to view details in another screen, When click the 'backbutton', I get the same resultset on the list-table view. The 'filter parameterts' are all blank. Don't know, how to put the entered filter criteria in the filter columns. Any comments would be helpful.
thank you


            "stateSave": true,
            "bStateSave": true,
            "fnStateSave": function (oSettings, oData) {
                localStorage.setItem( 'DataTables', JSON.stringify(oData) );
                },
            "fnStateLoad": function (oSettings) {
                return JSON.parse( localStorage.getItem('DataTables') );
                },
            'fnStateSaveParams': function(settings, data) {
                data.selected = this.api().rows({selected:true})[0];
            },
            'fnStateLoadParams': function(settings, data) {
              savedSelected = data.selected;

},

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    edited June 2019

    Hi @kvvchetty ,

    The stateSave will store the value of each column's filter and will reapply that filter on the next load, but it won't set the value in the filter control as that's outside the scope of the elements controlled by DataTables. You will need to reapply the stored search and insert it back into those controls in the stateLoadParams function (or initComplete),

    Cheers,

    Colin

  • kvvchettykvvchetty Posts: 2Questions: 1Answers: 0
    edited June 2019

    I found one similar question and response on 'stack overflow'

    https://stackoverflow.com/questions/37030451/jquery-datatable-retain-filter-parameter-after-refresh

     var state = $dataTable.state.loaded();
     if ( state ) {
       $dataTable.columns().eq( 0 ).each( function ( colIdx ) {
       var colSearch = state.columns[colIdx].search;
    
       if ( colSearch.search ) {
         $('input', $('.filters th')[colIdx]).val( colSearch.search );
       }
      });
      $dataTable.draw();
     }
    

    In this code snippet, If I enter filter condition for one column, get the resultset, go to another screen and comeback, all my filters filled with the one-value.

    I have five filters with text-input and two of them has 'select drop-down' . Don't know, how to pass the index to the particular filter. Any comments would be helpful.

    thank you

    Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Yep, that code will do - well, at least for a single input element. You just need to loop through your saved state data, and update all your input elements. If that doesn't help, 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

This discussion has been closed.