state save

state save

LapointeLapointe Posts: 430Questions: 81Answers: 4

Hello

I use one unique datatable / form for a lot of datas...

I call the only one php file passing table name (and other informations if needed) as parameters an set fields according these parameters.

For example, on table 1 (master) witch have some childs in table 2, I select a row an click on button to start ChildTable display using same php file with location.replace and parameters as ChildTableName, ParentID, and parent table name as return URL for return button.

When returning I know the table name and ID of old selected row (ParentID) but can not be sure this row is displayed in current table view to select it at return time.

Is it possible, when returning to caller (master table), to set the state as it was before calling child table (order, filter, page) and to select previous selected row

Thanks by advance

Replies

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

    Hi @Lapointe ,

    You can use the callbacks stateSaveParams and stateLoadParams to save and load whatever you want into the saved state.

    This example here is using that to save the selected rows, which are then reselected when the table is reloaded. You could do the same for your data.

    Cheers,

    Colin

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Hi @colin
    Thanks
    I'll test and try to save the current page displayed so when comming back first select correct page and then last selected row

    By your experience, (I relaunch each time the same php file, so the same datatable is used by the new call) where is the best to save the current state ? coockies, saving in a table as push / pop for each user, passing post (or get ?) parameters arrays (for multiple call and return back) when calling a child table ?

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

    Hi @Lapointe ,

    The drawCallback is generally a good place, but also consider where any changes may happen that may not generate a draw.

    Cheers,

    Colin

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    hi @colin
    I do set the stateSave in application.

    Everythink works fine else the columns filterset are not restored.
    Data state is stored and reloaded correctly, including filter expression for each column, but these values are not set to the listbox.
    I do

            var table = $('#donnees').DataTable( {                      
                dom: "Blfrtp",      
                stateSave: true,
                stateSaveParams: function(settings, data) {
                    data.selected = this.api().rows({selected:true})[0];            },
                stateLoadParams: function(settings, data) {
                    savedSelected = data.selected;          },
                stateSaveCallback: function(settings,data) {
                    localStorage.setItem( 'lots_1', JSON.stringify(data) );     },
                stateLoadCallback: function(settings) {
                    return JSON.parse( localStorage.getItem( 'lots_1' ) );      },      
    //{time: 1574873798821, start: 0, length: 10, order: Array(2), search: {…}, …}
    //columns: Array(9)
    //0: {visible: true, search: {…}}
    //1: search: {search: "^Appartement$", smart: false, regex: true, caseInsensitive: true}
    visible: true
    //__proto__: Object
    //2: {visible: true, search: {…}}    
                            
    ...........
    ...........
    
    initcomplete:
                        this.api().columns([0,1,2,3]).every( function () {
                            var column = this;
                            var select = $('<select><option value=""></option></select>')
                                .appendTo( $(column.footer()).empty() )
                                .on( 'change', function () {
                                        var val = $.fn.dataTable.util.escapeRegex($(this).val());    
                                        column
                                            .search( val ? '^'+val+'$' : '', true, false )
                                            .draw();
                                } );
                                column.data().unique().sort().each( function ( d, j ) {
                                    (d!=null) ? select.append( '<option value="'+d+'">'+d+'</option>' ):'';
                                });
                        });
    
    
    

    Where is the error please ?
    When, where and how can I place loaded filter values in column search listbox ?

    Thanks by advance

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

    This thread discusses that. Basically, it's because those column controls are custom, so you need to restore those values yourself - DataTables has no knowledge of them.

    You can do that in stateLoadParams by getting the column's search string, and matching that with the options in the search listbox.

    Colin

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Hi @colin
    I do have a look to the cases about that.
    The search listbox are constructed dynamically at initComplete, and loadStateParams at table initialisation (before initComplete)... so I don't know how to refer to these filter listbox in LoadStateParams
    So do you mean I save data to a global var in stateLoadParams and place them as <default> in the loop where filter listbox are constructed ?

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    so I do :

                stateLoadParams: function(settings, data) {
                    savedColumnsFilters = data.columns;
                },
                initComplete: 
                    function () {   
                        this.api().columns([0,1,2,3]).every( function () {
                            var column = this;
                            var select = $('<select><option value=""></option></select>')
                                .appendTo( $(column.footer()).empty() )
                                .on( 'change', function () {
                                        var val = $.fn.dataTable.util.escapeRegex($(this).val());    
                                        column
                                            .search( val ? '^'+val+'$' : '', true, false )
                                            .draw();
                                } );
                                column.data().unique().sort().each( function ( d, j ) {
                                    var t = '<option ';
                                    if (d!=null) {
                                        if (savedColumnsFilters[column[0][0]].search.search == '^'+d+'$'){
                                            t += "selected='selected' ";
                                        }
                                        select.append( t + 'value="'+d+'">'+d+'</option>' );
                                    }
                                });
                        });
    
    

    I hope there is a better way to do but not found it yet

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

    Yep, at a glance that looks right. You can use state.loaded() to get the loaded state, so you don't need a variable, but otherwise it looks fine.

    Colin

This discussion has been closed.