Pageblock not re-rendering after button click for pagination

Question

I have a VF page that lists all the records for a user:

I am trying to add pagination to the list as described by redpoint in their article

here is my VF Page code:

<apex:pageBlock id="navGroup" rendered="true" >
    <div class="blueBorder WidthAuto HeightAuto" id="ListRecs" >

            <div align="center">

                <apex:actionFunction action="{!refreshGrid}" name="queryByPage" reRender="navGroup,myButtons" >
                    <apex:param name="firstParam" assignTo="{!selectedPage}" value="" />
                </apex:actionFunction> 

                <apex:dynamicComponent componentValue="{!navButtons}"/> 
            </div>

            <table border="1" style="width: 100%; text-align: left;"  class="ComponentTable">
                <tr style="background-color: #81d8d0;" rows="2">

                    <th style="text-align: center; width: 7%;">
                        <font class="MainPanelFont small">
                        Request
                        </font>
                    </th>
                    <th style="width: 23%;text-align: center;">
                        <font class="MainPanelFont small">
                            Description
                        </font>
                    </th>
                    <th style="width: 15%;text-align: center;">
                        <font class="MainPanelFont small">
                            Manager
                        </font> 
                    </th>
                    <th style="width: 15%;text-align: center;">
                        <font class="MainPanelFont small">
                            Created by
                        </font>
                    </th>
                    <th style="width: 10%; text-align: center;">
                        <font class="MainPanelFont small">
                            Status
                        </font> 
                    </th>       
                    <th style="width: 10%; text-align: center;">
                        <font class="MainPanelFont small">
                            Last Modified
                        </font> 
                    </th>                                                               
                </tr>

                <apex:repeat value="{!listRecords}" var="Requests">
                    <tr>
                        <td style="border-right:none; align:center;">
                            <apex:outputpanel Id="RequestID" 
                                        onmouseover="ButtonMouseOver('{!Requests.id}_RequestID');" 
                                        onmouseout="ButtonMouseOut('{!Requests.id}_RequestID');" >
                                <div id="{!Requests.id}_RequestID" class="block-link_Vsmall" >
                                    <apex:outputLink style="color: rgb(255,255,255)" value="/apex/SystemChangeRequest?mode=view&id={!Requests.id}">View</apex:outputLink>
                                </div>                                          
                            </apex:outputpanel>
                        </td>
                        <td style="border-left:none;">
                            <apex:outputText >{!Requests.Name}</apex:outputText> 
                            <br/>
                            <apex:outputText value="{!Requests.Request_Title__c}" />
                            <br/>
                            (<apex:outputText value="{!Requests.recordType.Name}" />)
                        </td>

                        <td>
                            <apex:outputText style="align:left" value="{!Requests.Manager__r.Name}" />
                        </td>
                        <td>
                            <apex:outputText value="{!Requests.CreatedBy.Name}" />
                        </td>
                        <td>
                            <apex:outputText style="align:left" value="{!Requests.Status__c}" />
                        </td>   
                        <td>
                            <apex:outputText style="align:left" value="{!Requests.Last_Modified_Date__c}" />
                            <br/>
                            <apex:outputText style="align:left" value="{!Requests.Last_Modified__c}" />
                        </td>
                    </tr>
                </apex:repeat>

            </table>                    
        </div>
    </apex:pageBlock>

Here is the part of the controller that I have added after reading the above article:

// return a list of records owned by the user
public list<Request_for_System_Change__c> getListRecords(){

    system.debug('getListRecords');
    system.debug('getListRecords counter='+counter);
    system.debug('getListRecords limit='+list_size);

    return [SELECT 
                id
                , Name
                , Status__c
                , Request_Title__c
                , recordType.Name
                , Manager__r.name
                , CreatedBy.name
                , Description_of_change_requested__c
                , Last_Modified_Date__c
                , Last_Modified__c 
            FROM 
                Request_for_System_Change__c
            WHERE 
                //ownerid=:userInfo.getUserID()
                Originating_Owner__c=:userInfo.getUserID() OR Manager__c=:userInfo.getUserID()
            ORDER BY 
                LastModifiedDate DESC,
                Status__c DESC
            limit :list_size
            offset :counter                                                     
            ];      
}

public integer getSizeListRequests() {
    // set the total size in the constructor

    selectedPage='0';   
    return [SELECT 
                id
                , Name
                , Status__c
                , Request_Title__c
                , recordType.Name
                , Manager__r.name
                , CreatedBy.name
                , Description_of_change_requested__c
                , Last_Modified_Date__c
                , Last_Modified__c 
            FROM 
                Request_for_System_Change__c
            WHERE 
                Originating_Owner__c=:userInfo.getUserID() OR Manager__c=:userInfo.getUserID()
            ORDER BY 
                LastModifiedDate DESC,
                Status__c DESC
            ].size();                
  }    

// List Records pagination
public Component.Apex.pageBlockButtons getnavButtons() {

    //the reRender attribute is a set NOT a string
    Set<string> theSet = new Set<string>();
    theSet.add('myPanel');
    theSet.add('myButtons');

    integer totalPages;
    if (math.mod(total_size, list_size) > 0) {
        totalPages = total_size/list_size + 1;
    } else {
        totalPages = (total_size/list_size);
    }

    integer currentPage;        
    if (selectedPage == '0') {
        currentPage = counter/list_size + 1;
    } else {
        currentPage = integer.valueOf(selectedPage);
    }

    Component.Apex.pageBlockButtons pbButtons = new Component.Apex.pageBlockButtons();        
    pbButtons.location = 'top';
    pbButtons.id = 'myPBButtons';

    Component.Apex.outputPanel opPanel = new Component.Apex.outputPanel();
    opPanel.id = 'myButtons';

    //the Previous button will alway be displayed
    Component.Apex.commandButton b1 = new Component.Apex.commandButton();
    b1.expressions.action = '{!Previous}';
    b1.title = 'Previous';
    b1.value = 'Previous';
    b1.expressions.disabled = '{!disablePrevious}';        
    b1.reRender = theSet;

    opPanel.childComponents.add(b1);        

    for (integer i=0;i<totalPages;i++) {
        Component.Apex.commandButton btn = new Component.Apex.commandButton();

        if (i+1==1) {
            btn.title = 'First Page';
            btn.value = 'First Page';
            btn.rendered = true;                                        
        } else if (i+1==totalPages) {
            btn.title = 'Last Page';
            btn.value = 'Last Page';
            btn.rendered = true;                            
        } else {
            btn.title = 'Page ' + string.valueOf(i+1) + ' ';
            btn.value = ' ' + string.valueOf(i+1) + ' ';
            btn.rendered = false;             
        }

        if (   (i+1 <= 5 && currentPage < 5)
            || (i+1 >= totalPages-4 && currentPage > totalPages-4)
            || (i+1 >= currentPage-2 && i+1 <= currentPage+2))
        {
            btn.rendered = true;
        }

        if (i+1==currentPage) {
            btn.disabled = true; 
            btn.style = 'color:blue;';
        }  

        btn.onclick = 'queryByPage(\''+string.valueOf(i+1)+'\');return false;';

        opPanel.childComponents.add(btn);

        if (i+1 == 1 || i+1 == totalPages-1) { //put text after page 1 and before last page
            Component.Apex.outputText text = new Component.Apex.outputText();
            text.value = '...';        
            opPanel.childComponents.add(text);
        } 

    }

    //the Next button will always be displayed
    Component.Apex.commandButton b2 = new Component.Apex.commandButton();
    b2.expressions.action = '{!Next}';
    b2.title = 'Next';
    b2.value = 'Next';
    b2.expressions.disabled = '{!disableNext}';        
    b2.reRender = theSet;
    opPanel.childComponents.add(b2);

    //add all buttons as children of the outputPanel                
    pbButtons.childComponents.add(opPanel);  

    return pbButtons;

}    

public PageReference refreshGrid() { //user clicked a page number        
    system.debug('**** ' + selectedPage);
    return null;
}

public PageReference Previous() { //user clicked previous button
    selectedPage = '0';
    counter -= list_size;
    return null;
}

public PageReference Next() { //user clicked next button
    selectedPage = '0';
    counter += list_size;
    return null;
}

public PageReference End() { //user clicked end
    selectedPage = '0';
    counter = total_size - math.mod(total_size, list_size);
    return null;
}

public Boolean getDisablePrevious() { //this will disable the previous and beginning buttons
    if (counter>0) return false; else return true;
}

public Boolean getDisableNext() { //this will disable the next and end buttons
    if (counter + list_size < total_size) return false; else return true;
}

public Integer getTotal_size() {
    return total_size;
}

public Integer getPageNumber() {
    return counter/list_size + 1;
}

public Integer getTotalPages() {
    if (math.mod(total_size, list_size) > 0) {
        return total_size/list_size + 1;
    } else {
        return (total_size/list_size);
    }

The page looks like this on load:

I can see the buttons block being re-rendered as that block is changing, but the list grid of records stays the same.

Answer 1

According to the guide, you need to rerender corresponding section in your page. As far as your code says next:

Set<string> theSet = new Set<string>();
theSet.add('myPanel');
theSet.add('myButtons');
//...
b2.reRender = theSet;

That mean that you are trying to rerender apex:outputPanel with Id myPanel, which does not exists.

So, to make it working, just instead of myPanel use navGroup, which would rerender entire page block. Or add extra wrapper via apex:outputPanel to table.