Alphabetic Pagination in Visualforce Page

Controller Code :-

public class AlphabeticPagination {

    public List < String > SerchAlphabet {get;set;}
    public String SearchVar {get;set;}
    public list < Opportunity> Opp{get;set;}
    public list < Opportunity> ShowOpp {get;set;}
    public integer sizee {get;set;}
    public AlphabeticPagination ()
    {
        SerchAlphabet = new List < string > {'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'All'};
    Opp = new List < Opportunity> ();
        Opp = [SELECT name, CloseDate, Amount from Opportunity order by Name];
        SearchVar = 'All';
        ShowOpp = new List < Opportunity> ();
        for (Opportunity a: Opp)
        {
            if (SearchVar.equals('All'))
                ShowOpp.add(a);
            else
            if (a.Name.startsWith(SearchVar.toLowerCase()) || a.Name.startsWith(SearchVar))
                ShowOpp.add(a);
        }
        sizee = ShowOpp.size();
    }
    public PageReference display()
    {
        ShowOpp.clear();
        for (Opportunity a: Opp)
       {
            if (SearchVar.equals('All'))
                ShowOpp.add(a);
            else
            if (a.Name.startsWith(SearchVar.toLowerCase()) || a.Name.startsWith(SearchVar))
            {
                ShowOpp.add(a);
            }
        }
        sizee = ShowOpp.size();
        return null;
    }
}

Visualforce Page :-

<apex:page controller="AlphabeticPagination">
  <apex:form >
   <apex:pageBlock title="Opportunities">
             <table>
                <tr>
                <apex:repeat value="{!SerchAlphabet}" var="nn">
                    <td><apex:commandLink action="{!display}" reRender="pg" ><apex:param value="{!nn}" name="sss" assignTo="{!SearchVar}"/> {!nn}</apex:commandLink></td>
                    </apex:repeat>
                </tr>
            </table>
            <apex:outputpanel id="pg">
               <div id="showdata">
                    <apex:pageBlockTable value="{!ShowOpp}" var="k">
                    <apex:column headerValue="Name" value="{!k.name}"/>
                    <apex:column headerValue="Close Date" value="{!k.Closedate}"/>
                    <apex:column headerValue="Amount" value="{!k.Amount}"/>
                    </apex:pageBlockTable>
                    </div>
                    <div id="nodata" style = "display:none;">
                    <p><b>No record by selected letter.</b></p>
                </div>
               <script>
                    var sze='{!sizee}';
                    sz=parseInt(sze);
                    
                    if(sz>0)
                    {
                        document.getElementById('showdata').style.display="block";
                        document.getElementById('nodata').style.display="none";
                    }
                    else
                    {
                        document.getElementById('showdata').style.display="none";
                        document.getElementById('nodata').style.display="block";
                    }
              </script> 
          </apex:outputpanel>
   </apex:pageBlock>
  </apex:form>
</apex:page>

Screenshot 1 :-

Screenshot 2 :-