TableSort - Keep Pagination on table rerender

Question

I was just wondering how I would go about saving the current page on a table (jquery TableSort), on a page refresh?

ie: user is on page 5 of a table pagination via TableSort. They press a button that invokes a method and requires the table to be rerendered with new values in a certain row.

Currently, it resets back to page 1. How do I store 'page 5' and tell it to go back to page 5?

Here is a simplified code example:

<apex:pageblocktable value="{!x}" id="results" var="c" border="1" styleclass="tablesorter custom-popup">
   <apex:column value="{!c.field1}"/>
   <apex:column value="{!c.field2}"/>
   <apex:column value="{!c.field3}"/>
   <apex:column>
        <apex:outputpanel rerender="{!IF(a = true, true, false)}">
              <apex:outputtext value="something"/>
        </apex:outputpanel>
        <apex:outputpanel rerender="{!IF(a = true, false, true)}">
              <apex:outputtext value="something else" />
        <apex:outputpanel>
   </apex:column>
   <apex:column>
       <apex:commandbutton action = "{!changeSomethingElseValue}" rerender="results"/>
   </apex:column>

</apex:pageblocktable>

When the user presses the button, an action happens and one column will now show different data. I need to rerender the page, but still keep the user on the same pagination Page (ie: if they are on page 5, click on a row, it needs to rerender the table but stay on the same page).

Below is the relevant jquery:

<apex:includeScript value="{!URLFOR($Resource.jQueryLibrary, 'jquery.min.js')}"/>  
    <apex:includeScript value="{!URLFOR($Resource.jQueryLibrary, 'jquery-ui.min.js')}"/>
 <apex:includeScript value="{!URLFOR($Resource.jQueryLibrary, '/js/jquery.tablesorter.widgets.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryLibrary, '/js/extras/jquery.tablesorter.pager.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryLibrary, '/js/widgets/widget-columnSelector.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryLibrary, '/js/widgets/widget-stickyHeaders.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryLibrary, '/js/widgets/widget-storage.min.js')}"/>

<script type="text/javascript">  
    j$ = jQuery.noConflict();
    j$(document).ready(function () {
sortTable();});

 function sortTable(){

j$("[id$=searchResults]")
        .tablesorter({theme: 'green', widthFixed:true, showProcessing: true, widgets : [ 'columnSelector', 'stickyHeaders'],
                      widgetOptions : {
                          columnSelector_container : j$('#columnSelector'),
                          columnSelector_columns : {
                              0: 'disable', 
                              1: 'disable',
                              2: 'disable',
                              3: 'disable',
                              4: 'disable',
                              10: 'false'
                          },
                          columnSelector_saveColumns: true,
                          columnSelector_layout : '<label><input type="checkbox">{name}</label>',
                          columnSelector_name  : 'data-selector-name',
                          columnSelector_mediaquery: true,
                          columnSelector_mediaqueryName: 'All Columns',
                          columnSelector_mediaqueryState: true,
                          columnSelector_mediaqueryHidden: true,
                          columnSelector_breakpoints : [ '20em', '30em', '40em', '50em', '60em', '70em' ],
                          columnSelector_priority : 'data-priority',
                          columnSelector_cssChecked : 'checked'
                      },
                      headers: {0: {sorter: false, parser:false},  10: {sorter: false},  12: {sorter: false}, 14: {sorter: false}}
                     })
        .bind('pagerChange pagerComplete pagerInitialized pageMoved', function(e, c){
            var msg = '"</span> event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
                ' page <span class="typ">' + (c.page + 1) + '/' + c.totalPages + '</span>';
            j$('#display')
            .append('<li><span class="str">"' + e.type + msg + '</li>')
            .find('li:first').remove();
        })
        .tablesorterPager({container: j$(".pager"), size: 5, fixedHeight:true,savePages:false}); 
}
</script>

Answer 1

OK, so I figured this out and learned some very basic JavaScript.

1) Create a global variable to hold the page number

<script type="text/javascript">  
j$ = jQuery.noConflict();
var pagerPage =0;  //Global Variable!
j$(document).ready(function () 

2) Have a method to get the current page of the TableSorter

function getPage(){
        pagerPage = j$("[id$=searchResultsTable]")[0].config.pager.page;
        //zero based, need to add 1
        alert( 'current page is ' + (pagerPage + 1) ); //For testing
        }

3) Have a method that will run OnComplete - will re-initialize the tablesort, but then will change page

 function goToPage(){
        alert( 'current page is ' + (pagerPage + 1) ); // for testing
        sortTable();  //this re-initializes the table
        j$("[id$=searchResultsTable]").trigger('pageSet',pagerPage+1);  //This tells the table to change page number.  It's zero based, hence the +1)
        }

4) finally, run the getPage(); on the onClick of your button, and the goToPage(); on the oncomplete.

    <apex:commandbutton value="Do Something" action="{!myAction}" status="PleaseWait" 
                        onclick="getPage();" oncomplete="goToPage(); return false;"
                        rerender="rerenderSomeStuff" />

That's it! :)