State Saving Challenge

rf1234

I am using the same Data Table with three different configurations on three different pages with different URLs (The following links aren't working - only to explain in which way the URLs deviate from each other.)
https://www.mySite.eu/?page=ctrMgmtServerSide
https://www.mySite.eu/?page=ctrMgmtClientSide
https://www.mySite.eu/?page=ctrMgmtInboxExp

I noticed that layout changes (e.g. column visibility) are effective for all of my three different pages regardless on what page I make them.

How can I make sure that state saving will only be effective for the page I make the change on, not for the other two pages using the same Data Table?

rf1234

I found this here: https://datatables.net/reference/option/stateSave

"To be able to uniquely identify each table's state data, information is stored using a combination of the table's DOM id and the current page's pathname. If the table's id changes, or the page URL changes, the state information will be lost."

I am using different URLs for my three pages that have the same table so why are changes on one page effective for all of them?

rf1234

In the meantime I found a work around. On two of the three pages I need independent state saving. On the third page state saving is not allowed because it causes too much trouble.

This code saves the states of the two pages independently of each other. For the third page it does nothing which is ok because state saving is disabled for that page anyway.

allan

Interesting - the query string parameter is not included in the state saving path, so that should make no difference.

Are you able to give me a link to your page (I'm assuming mySite.eu is a placeholder)?

Allan

rf1234

Hi Allan, if the query string isn't part of the path, the behavior is clear for me: Then all three pages have the same path and the Data Tables on the three pages have the same DOM id. No surprise that they share the same state.

This is my solution right now with another work around.Using state saving causes problems with column search which I use in one of the three pages. All the stuff on "initComplete" is for that page. If the user excluded columns from view and the data table was reloaded column search didn't work any longer. Somehting in the sequence of the columns got lost I guess. But I also noticed: Removing columns from view and then doing column search in the remaining columns did not cause any problems.

I just emulated the manual process:
- save the loaded state regarding column visibility
- make all columns visible
- do all the column search stuff while columns are visible
- restore the loaded state from the saved version

Of course the user doesn't notice anything of making columns visible and then invisible again. But now column search works also with state saving.

var ctrTable = $('#tblCtrManagement').DataTable({
    dom: 'Bfrltip', 
    serverSide: serverSide,    //server side only works well with type "POST" !!!
    scrollX: scrollX,
    responsive: responsive,
    processing: false,
    orderCellsTop: true,
    searchDelay: 500,    
    stateSaveCallback: function(settings,data) {
        if ( ctrMgmtServerSidePage ) {
            localStorage.setItem( 'ctrMgmtServerSidePage_' + settings.sInstance, JSON.stringify(data) );
        } else if ( inboxExpPage ) {
            localStorage.setItem( 'ctrInboxExpPage_' + settings.sInstance, JSON.stringify(data) );
        } else {
            localStorage.setItem( 'ctrMgmtClientSidePage_' + settings.sInstance, JSON.stringify(data) );
        }
    },
    stateLoadCallback: function(settings) {
        if ( ctrMgmtServerSidePage ) {
            return JSON.parse( localStorage.getItem( 'ctrMgmtServerSidePage_' + settings.sInstance ) );
        } else if ( inboxExpPage ) {
            return JSON.parse( localStorage.getItem( 'ctrInboxExpPage_' + settings.sInstance ) );
        } else {
            return JSON.parse( localStorage.getItem( 'ctrMgmtClientSidePage_' + settings.sInstance ) );
        }
    },
    initComplete: function () {
        if ( ( ! ctrMgmtServerSidePage ) && ( ! inboxExpPage ) ) {
            //save the loaded state regarding column visibility
            var colArray = ctrTable.state().columns; 
            //set all table columns to visible
            ctrTable.columns().visible( true );
            var table = this.api();
            $('.filterHead', table.table().header()).each( function (i) {
                var title = (lang === 'de' ? 'Suche ' : 'Search ') + $(this).text();
                var column = table.column(i);
                var throttledSearch = $.fn.dataTable.util.throttle(                        
                    function (e) {
                        var code = e.which;
                        if ( code == 13 ) { //enter key
                            e.preventDefault();
                        }
                        var txt = $(this).val();
                        if ( txt.length > 1 || code == 8 || code == 46 ) {
                            column
                                .search(txt)
                                .draw();
                        }
                    },
                    1000
                );
                $('<input type="text" placeholder="'+title+'" class="text-muted"/>')
                    .appendTo( $(this).empty() )
                    .on( 'keyup change', throttledSearch); 
            } ); 
            //restore the loaded state regarding column visibility
            $.each(colArray, function(key, value) {
                if ( ! value.visible ) {
                    ctrTable.column(key).visible( false );
                }
            })