State Saving Challenge

State Saving Challenge

rf1234rf1234 Posts: 1,866Questions: 55Answers: 280
edited February 2020 in DataTables

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

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?


  • rf1234rf1234 Posts: 1,866Questions: 55Answers: 280

    I found this here:

    "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?

  • rf1234rf1234 Posts: 1,866Questions: 55Answers: 280

    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.

  • allanallan Posts: 55,060Questions: 1Answers: 8,643 Site admin

    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 is a placeholder)?


  • rf1234rf1234 Posts: 1,866Questions: 55Answers: 280
    edited February 2020

    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
                            var txt = $(this).val();
                            if ( txt.length > 1 || code == 8 || code == 46 ) {
                    $('<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 );
Sign In or Register to comment.