Sorting by column working only in 1st page but not in 2nd page with pagination

Question

I have used jquery plugin tablesorter to sort objects by column.Sorting is working fine for 1st page but not for other pages.I have added pagination.Any help would be much appreciated.I am stuck on this issue.Only this features i am not able to implement.My VF page and extensions are below:

VF Page:

    <apex:page controller="Pagination" sidebar="false" showHeader="false">
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"/>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
    <apex:includeScript value="{!$Resource.tablesorter}"/>

<script type="text/javascript">
        $j = jQuery.noConflict();    
        $j(document).ready(function () {
        $j("[id$=details]").tablesorter();
        });
    function reInitializeTableSorter() {
    $j("[id$=details]").tablesorter();
}
</script>

<apex:form >
<apex:pageBlock id="details">
<apex:pageBlockButtons >
          <apex:commandButton action="{!saveRecords}" value="Save the records" reRender="details" onComplete="reInitializeTableSorter()" />
          <apex:commandButton action="{!DeleteRecords}" value="Delete the records" reRender="details" onComplete="reInitializeTableSorter()" />
         <apex:commandButton action="{!CancelRecords}" value="Cancel" reRender="details" onComplete="reInitializeTableSorter()"/>
         <apex:commandButton action="{!SendEmail}" value="Send an email" reRender="details" onComplete="reInitializeTableSorter()" />
</apex:pageBlockButtons>

<apex:pageblockTable value="{!Opplist}" var="Opp" id="details" styleClass="tablesorter" headerClass="header" >
    <apex:column >
        <apex:facet name="header">
            <apex:inputCheckbox />
        </apex:facet>
        <apex:inputCheckbox value="{!Opp.isSelected}" id="InputId"/>
    </apex:column>
<apex:column value="{!Opp.Oppo.Name}" />
<apex:column value="{!Opp.Oppo.stageName}"/>
<apex:column value="{!Opp.Oppo.Amount}"/>
<apex:column value="{!Opp.Oppo.CloseDate}"/>
<apex:column value="{!Opp.Oppo.account.name}"/>
</apex:pageblockTable>
<apex:pageblockButtons >
<apex:commandButton value="First Page" rerender="details" action="{!FirstPage}" disabled="{!prev}" />
<apex:commandButton value="Previous" rerender="details" action="{!previous}" disabled="{!prev}"/>
<apex:commandButton value="Next" rerender="details" action="{!next}" disabled="{!nxt}"/>
<apex:commandButton value="Last Page" rerender="details" action="{!LastPage}" disabled="{!nxt}"/>
</apex:pageblockButtons>
</apex:pageBlock>
</apex:form></apex:page>

Apex(controller) class:

public class Pagination
{
    public list<wrapOpportunity> wrapOpportunityList { get; set; }
    public list<Opportunity> selectedOpportunities{get;set;} 



    public Pagination(ApexPages.StandardController controller) {

    }

private integer totalRecs = 0;
private integer OffsetSize = 0;
private integer LimitSize= 5;

ID accid=ApexPages.currentPage().getParameters().get('Id');

public Pagination()
{
totalRecs = [select count() from Opportunity where stageName NOT IN ('Closed Won','Closed Lost') ];
//totalRecs = [select count() from Opportunity where Accountid=:accid and stageName NOT IN ('Closed Won','Closed Lost')];
}

public List<wrapOpportunity> getOpplist() 
{
wrapOpportunityList =new list<wrapOpportunity>();

List<Opportunity> OppLists= Database.Query('SELECT Name, id,stageName,accountid,account.name,CloseDate,Amount,ownerid FROM Opportunity where stageName NOT IN (\'Closed Won\',\'Closed Lost\') LIMIT :LimitSize OFFSET :OffsetSize');         
//List<Opportunity> OppLists= Database.Query('SELECT Name, id,stageName,accountid,account.name,CloseDate,Amount FROM Opportunity where Accountid=:accid and stageName NOT IN (\'Closed Won\',\'Closed Lost\') LIMIT :LimitSize OFFSET :OffsetSize');
System.debug('Values are ' + OppLists);
for(Opportunity a:OppLists){
           wrapOpportunitylist.add(new wrapOpportunity(a));  
        }
return wrapOpportunityList;
}


 public class wrapOpportunity{

    public Opportunity Oppo{get;set;}
    public boolean isSelected{get;set;}

       public wrapOpportunity(Opportunity a){

         Oppo=a;
         isselected=false;
       }
  }

public void FirstPage()
{
OffsetSize=0;
}
public void previous()
{
OffsetSize = OffsetSize-LimitSize;
}public void next()
{
OffsetSize = OffsetSize+LimitSize;
}public void LastPage()
{
OffsetSize = totalrecs-math.mod(totalRecs,LimitSize);
}
public boolean getprev()
{
if(OffsetSize ==0)
return true;
else
return false;
}
public boolean getnxt()
{
if((OffsetSize+LimitSize)>totalRecs)
return true;
else
return false;
}

 public void ProcessSelected(){
     selectedOpportunities=new list<Opportunity>();

      for(wrapOpportunity wrapobj:wrapOpportunitylist){
           if(wrapobj.isSelected==true){
           selectedOpportunities.add(wrapobj.Oppo);
           }          
         }
      }

public PageReference SendEmail() {
   ProcessSelected();
   list<id> ownerids=new list<id>();
   for(Opportunity ops: selectedOpportunities){
   ownerids.add(ops.ownerid);
   }
       Messaging.MassEmailMessage mail = new Messaging.MassEmailMessage();
       mail.setTargetObjectIds(ownerids);
       mail.setTemplateId('00X28000000zmKxEAI');
       mail.setSaveasactivity(False);
       Messaging.sendEmail(new Messaging.MassEmailMessage[] { mail }); 

       return null;
      }


    public PageReference CancelRecords() {
    PageReference pageref=new PageReference('/'+accid); 
    //pageref=ApexPages.currentPage().getURL();
   // pageref.setRedirect(False);
        return pageref;
    }


    public PageReference DeleteRecords() {
        ProcessSelected();
   List<Opportunity> oo1=new List<Opportunity>();
    For(Opportunity oo2:selectedOpportunities){
    Opportunity oo3 = new Opportunity();
        oo3.id=oo2.id;
        //oo3.accountid=accid;
    oo1.add(oo3);
    }
    delete oo1;
   return null;
    }


    public PageReference saveRecords() {
    ProcessSelected();
   List<Opportunity> oo1=new List<Opportunity>();
    For(Opportunity oo2:selectedOpportunities){
    Opportunity oo3 = new Opportunity();
        oo3.id=oo2.id;
        oo3.accountid=accid;
    oo1.add(oo3);
    }
    update oo1;
        return null;
    }


}

Answer 1

You will have to reinitialize the tablesorter plugin. When you go to the next page, the DOM elements are refreshed so you will need to reinitialize the tablesorter.

You can add an onComplete function on the button to call the javascript once the next set of results are loaded.

<apex:commandButton value="Next" rerender="details" action="{!next}" disabled="{!nxt}" onComplete="reInitializeTableSorter()"/>
---you will have to do the same for all the buttons
Javascript:

function reInitializeTableSorter() {
    $j("[id$=details]").tablesorter();
}

But you could also do the sorting from the server. There are lot of examples online which can help you with that. Or completely build the solution on the client with remoteAction / remoteObject so that you can use the tablesorter plugin in a better fashion.