Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  October 2019

  Hi @jdadwilson ,

  You could try implementing stateSave, see example here.

  Cheers,

  Colin
• jdadwilson Posts: 127Questions: 30Answers: 1

  October 2019

  Colin, thanks for the reply.

  I looked at the example you suggested. Added the stateSave line to my code. Didn't work.

  I noticed below the example a box identifying what versions of jQuery and dataTables were loaded with the example. I set both of them in my code. Got an error message... "Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3."

  Changed the jQuery version to 2.2.4. Still didn't work.

  Maybe I am not understanding what the stateSave really does. Follow this example

  Load the following page... www.msholmes.org
  Select Cemeteries from the menu at the top
  On the Cemeteries page select the number 375 on the second line of the table
  On the Memorials page select the letter M of the alphabet bar.
  From the M list select the first name in the list... Mangum, Ann Diggs
  On the Memorial page select the browser back arrow
  Memorials page loads to the beginning (All) of the table.
  

  I would like the table to reload to the previously Selected letter (M in this case, and even to the selected page number).

  If the stateSave will not do this then might it be possible to set the letter and page number via parameters passed to the page via the URL. I tried this...

  $('div #myAlphabet.alphabet span:eq(' + thisLetter + ')').click();
  

  but, that didn't work either. I just defined thisLetter = 'M' for a test.

  Note: I am running version 1.10.11 of dataTables. I tried 1.10.18 but the site blows up. With over 60 tables on the site upgrading to a new version is a major endeavor. One that I may soon have to bite the bullet and do.

  Again, thanks for your assistance. Your help is greatly appreciated.

  jdadwilson
• colin Posts: 15,240Questions: 1Answers: 2,599

  October 2019

  Hi @jdadwilson ,

  It's hard to diagnose without seeing it in action. 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
• jdadwilson Posts: 127Questions: 30Answers: 1

  October 2019

  I implemented the code of this example. It does what I want it to do! BUT, on the first pass through the table load it gets an error on this line...

  if (state.selected !== undefined) { $('div.alphabet span:eq(' + state.selected + ')').click(); }
  

  Here is the complete table code...

      var oTable = $('#mainTable').DataTable({
          ajaxSource: window.SERVER_PATH + 'files_ajax/ajax_Memorials.php' + sParam,
          stateSave: true,
          columns: [{
   data: 'per_name',
        className: 'udatal',
   orderable: false,
   visible: true,
   searchable: true
   },
                    {
   data: 'per_birthdate',
   className: 'udatar',
   orderable: false,
   visible: true,
   searchable: true
   },
                    {
   data: 'per_deathdate',
   className: 'udatar',
   orderable: false,
   visible: true,
   searchable: true
   },
                    {
   data: 'per_available',
   className: 'udatal',
   orderable: false,
   visible: true,
   searchable: false
   },
                    {
   data: 'cem_name',
        className: 'udatal',
   orderable: false,
   visible: true,
   searchable: false
   }
   ],
          dom: 'A<"top"lfp>rt<"bottom"pi><"clear">',
          stateSaveParams: function(settings, data) { data.selected = $('span.active').index() },
          stateLoadParams: function(settings, data) { savedSelected = data.selected; },
          language: { "paginate": { "previous": "Prev" } },
          lengthMenu: [15, 30, 60],
          order: [],
          paging: true,
          pagingType: 'full_numbers',
          select: { style: 'single', info: false },
          initComplete: function() {
              if ( isNaN(cemId)) { oTable.column(4).visible(true); } else { oTable.column(4).visible(false); } // Don't show cem-column if single cemetery
              doHideAlphaLtrs( this, oTable );
              var api = this.api();
              var state = api.state.loaded();
              if (state.selected !== undefined) { $('div.alphabet span:eq(' + state.selected + ')').click(); }
              if (state.start !== 0) { api.page(state.start / state.length).draw(false); }
              api.state.save();
          },
          drawCallback: function() {
   doHideInfoAreas(this);
   }
      });
  

  Thanks for your help!

  jdadwilson
• colin Posts: 15,240Questions: 1Answers: 2,599

  October 2019

  BUT, on the first pass through the table load it gets an error on this line...

  Yep, you're close. The error is because there's no saved state on the first pass through, so the code should check for state === null before referencing state.selected.

  Colin
• jdadwilson Posts: 127Questions: 30Answers: 1

  October 2019

  I modified the code as follows...

  if ( state !== null ) {
      if (state.selected !== undefined) { $('div.alphabet span:eq(' + state.selected + ')').click(); }
      if (state.start !== 0) { api.page(state.start / state.length).draw(false); }
  }
  

  Works great... no error!

  Thanks, for your work help.

  jdadwilson