Replies

• rf1234 Posts: 3,000Questions: 87Answers: 421

  February 2020

  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 Posts: 3,000Questions: 87Answers: 421

  February 2020

  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 Posts: 63,534Questions: 1Answers: 10,475 Site admin

  February 2020

  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 Posts: 3,000Questions: 87Answers: 421

  February 2020 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
                              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 );
                  }
              })