XPages pager refresh issue - xpages

Question

I have a problem with a pager performing a partial refresh (since we have server side redirection rules, full refresh is not an option here). If I place the pager on the same page rather than in a custom control then it refresh the main panel. But if I place the pager in a custom control, then it only updates the repeat control, which means the pager control itself doesn't get refreshed. Here is a simple example to demonstrate the problem.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:panel id="mainPanel">
<xc:ccPager pagerFor="repeat1" id="myPager" />
<xp:repeat id="repeat1" rows="3" var="row">
<xp:this.value><![CDATA[#{javascript:var cars = ["Saab", "Volvo", "BMW", "Saab", "Volvo", "BMW"];
return cars; }]]></xp:this.value>
<xp:text escape="true" id="computedField1" value="#{row}">
</xp:text>
</xp:repeat>
</xp:panel>
</xp:view>
And here is the code for the custom control:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:pager layout="Previous Group Next" partialRefresh="true"
id="pager1" for="#{compositeData.pagerFor}" partialExecute="false">
</xp:pager>
</xp:view>
Any tips would be welcome. In this case the pager is simple, but I have a more complex pager and a pagesizes control with 45 lines of source code, so I would prefer to create a re-useable custom component if possible at all.
UPDATE
My current pager custom control:
<div id="page-result" class="pagination pagination-small clearfix">
<div class="col-lg-12 pagination clearfix">
<div class="results form-inline left">
<fieldset>
<xp:pager id="pager1" alwaysCalculateLast="true"
for="#{compositeData.strPagerFor}" styleClass="pag-control"
partialRefresh="true" partialExecute="false">
<xp:pagerControl id="pagerControl1" type="FirstImage"
styleClass="firstPage" image="/PagerArrowhead2-L_d.png">
</xp:pagerControl>
<xp:pagerControl id="pagerControl2" type="PreviousImage"
styleClass="previousPage" image="/PagerArrowhead-L_d.png">
</xp:pagerControl>
<xp:pagerControl id="pagerControl5" type="Group"
currentStyleClass="active" styleClass="pages">
</xp:pagerControl>
<xp:pagerControl id="pagerControl3" type="NextImage"
styleClass="nextPage" image="/PagerArrowhead.png">
</xp:pagerControl>
<xp:pagerControl id="pagerControl4" type="LastImage"
styleClass="lastPage" image="/PagerArrowhead2.png">
</xp:pagerControl>
</xp:pager>
<label>
<xp:text escape="true" id="computedField1" value="#{compositeData.strLabelText}" />
</label>
</fieldset>
</div>
<div class="results form-inline">
<fieldset>
<label> Results per page: </label>
<xe:pagerSizes id="pagerSizes1" for="#{compositeData.strPagerFor}"
sizes="7|15|25|50|all" text="{0}" styleClass="resultPage"
partialRefresh="true" partialExecute="false"
refreshId="#{compositeData.strRefreshPanel}" />
</fieldset>
</div>
</div>
</div>

Answer 1

I've hit this problem before. I think it's because the view container cannot find the pager when it's in a separate custom control. I presume it's using something like getComponent, which can't navigate down into custom controls, so it can't locate the pager to update it.
Can you extract the code for your pagesizes control into a Java dataObject / bean / util or dataContext / SSJS library? Then reference it with one line of SSJS or EL?
The other option would be to use a plugin and build a component that extends the repeat control and adds the pager to the relevant header?
Tim Tripcony gave a great demo of a quick and dirty way of doing it http://www.notesin9.com/2012/04/04/notesin9-064-global-custom-controls-fixed/