VISUALFORCE: Paging List

CustomOpportunityHome.page

<apex:page standardController="Opportunity" recordSetVar="opportunities" extensions="OpportunityHomeExtension" sidebar="false">
    <apex:sectionHeader title="Opportunities" subtitle="Home" />
    <apex:form id="f">


        <apex:panelGrid id="bodyTable" columns="2" styleClass="outer" width="100%">
            <apex:panelGroup >
                <td id="sidebarCell" class="sidebarCell">
                <div class="sidebar" id="sidebarDiv"><!-- OPPORTUNITY STAGE -->
                <div class="sidebarModule">
                <div class="sidebarModuleHeader brandPrimaryBg">
                <h2 class="brandPrimaryFgr">Opportunity Stage</h2>
                </div>
                <apex:selectCheckboxes id="stage" value="{!stages}"
                    layout="pageDirection" styleClass="sidebarModuleBody"
                    style="min-width: 200px">
                    <apex:selectoptions value="{!stageitems}"></apex:selectoptions>
                </apex:selectCheckboxes></div>
                <!-- PRODUCT TYPE -->
                <div class="sidebarModule">
                <div class="sidebarModuleHeader brandPrimaryBg">
                <h2 class="brandPrimaryFgr">Product Type</h2>
                </div>
                <apex:selectCheckboxes id="products" value="{!products}"
                    layout="pageDirection" styleClass="sidebarModuleBody"
                    style="min-width: 200px">
                    <apex:selectoptions value="{!lineitems}"></apex:selectoptions>
                </apex:selectCheckboxes></div>
                <!-- COUNTRY -->
                <div class="sidebarModule">
                <div class="sidebarModuleHeader brandPrimaryBg">
                <h2 class="brandPrimaryFgr">Country</h2>
                </div>
                <apex:selectCheckboxes id="country" value="{!countries}"
                    layout="pageDirection" styleClass="sidebarModuleBody"
                    style="min-width: 200px">
                    <apex:selectOptions value="{!items}"></apex:selectOptions>
                </apex:selectCheckboxes></div>
                </div>
                </td>
            </apex:panelGroup>


            <!-- PAGE BLOCK -->
            <apex:pageBlock title="Opportunities">
                <apex:pageBlockButtons >
                    <apex:commandButton value="Update View"
                        action="{!updateStandardSetController}" rerender="out"
                        status="status" />
                </apex:pageBlockButtons>

                <!--  DATA TABLE PAGE BLOCK SECTION -->
                <apex:pageBlockSection collapsible="false" columns="1"
                    id="dataTable" showHeader="true">
                    <!-- MAIN PANEL -->
                    <apex:outputPanel layout="inline" id="out" style="min-width:100%;">


                    <!-- DATA GRID -->
                        <apex:outputPanel id="opportunitylist">
                            <apex:pageBlockTable value="{!Opportunities}" var="o"
                                width="100%">
                                <apex:column >
                                    <apex:facet name="header">Opportunity</apex:facet>
                                    <apex:outputLink value="/{!o.id}" target="_blank">{!o.Name}
                                    </apex:outputLink>
                                </apex:column>
                                <apex:column value="{!o.StageName}" />
                                <apex:column value="{!o.SaleAmount__c}" />
                                <apex:column value="{!o.SiteCountry__c}" />
                            </apex:pageBlockTable>
                        </apex:outputPanel>


                        <!-- PAGINATION -->
                        <apex:outputPanel layout="block" styleClass="bottomNav"
                            id="footer_bottomNav" style="width:100%;">
                            <apex:panelGrid width="65%" columns="2"
                                styleClass="selectorTarget">
                                <!-- GROUP 1 -->
                                <apex:panelGroup layout="block" styleClass="paginator">
                                    <apex:outputText value="Page Size" />
                                        &nbsp;
                                        <apex:selectList size="1" value="{!pageSize}">
                                        <apex:selectOptions value="{!pageSizes}" />
                                        <apex:actionSupport event="onchange"
                                            action="{!updateStandardSetController}" rerender="f" />
                                    </apex:selectList>
                                        &nbsp;&nbsp;
                                        <apex:outputText rendered="{!IF(oSsc.resultSize< 250,true,false)}">Total: {!oSsc.resultSize}</apex:outputText>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    </apex:panelGroup>

                                <!-- GROUP 2 -->
                                <apex:panelGroup layout="block" styleClass="prevNextLinks">
                                    <apex:image url="/img/search_prevarrow_disabled.gif"
                                        rendered="{!NOT(oSsc.HasPrevious)}" />
                                    <apex:image url="/img/search_prevarrow.gif"
                                        title="Previous Page" rendered="{!oSsc.HasPrevious}" />
                                        &nbsp;
                                        &nbsp;
                                        <apex:commandLink value="Previous Page"
                                        action="{!previous}" rendered="{!oSsc.HasPrevious}"
                                        rerender="out" />
                                    <apex:outputPanel style="color: grey;"
                                        rendered="{!NOT(oSsc.HasPrevious)}">Previous Page</apex:outputPanel>
                                        ({!IF(oSsc.PageNumber == 1,1,((oSsc.PageNumber -1) * oSsc.PageSize)+1)}-{!IF(oSsc.resultSize < oSsc.PageSize,oSsc.resultSize,oSsc.PageNumber * oSsc.pageSize)})
                                        &nbsp;
                                        &nbsp;
                                        &nbsp;
                                        &nbsp;
                                        <apex:outputPanel style="color:grey;"
                                        rendered="{!NOT(oSsc.HasNext)}">Next Page</apex:outputPanel>
                                    <apex:commandLink action="{!next}" value="Next Page"
                                        rendered="{!oSsc.HasNext}" rerender="out" />
                                        &nbsp;
                                        &nbsp;
                                        <apex:image url="/img/search_nextarrow.gif"
                                        title="Next Page" rendered="{!oSsc.HasNext}" />
                                    <apex:image url="/img/search_nextarrow_disabled.gif"
                                        rendered="{!NOT(oSsc.HasNext)}" />
                                </apex:panelGroup>
                            </apex:panelGrid>
                        </apex:outputPanel>

                        <!-- FILTER -->
                        <apex:outputPanel layout="block">
	                        <apex:actionstatus id="status" startText="Loading...">
	                            <apex:facet name="stop">
	                                <apex:outputPanel >
	                                    <apex:panelGrid columns="3">
	                                    <apex:facet name="header">Selected Filters:</apex:facet>
	                                    <apex:dataList value="{!products}" var="p" type="circle" title="Product Type" style="font-weight: bold;">{!p}</apex:dataList>
	                                    <apex:dataList value="{!countries}" var="c" type="circle" title="Country" style="font-weight: bold;">{!c}</apex:dataList>
	                                    <apex:dataList value="{!stages}" var="s" type="circle" title="Opportunity Stage" style="font-weight: bold;">{!s}</apex:dataList>
	                                    </apex:panelGrid>
	                                </apex:outputPanel>
	                            </apex:facet>
	                        </apex:actionstatus>
                        </apex:outputPanel>
                    </apex:outputPanel>
                </apex:pageBlockSection>
            </apex:pageBlock>
        </apex:panelGrid>
    </apex:form>
</apex:page>