Issue with pagers while Repeating Repeaters - xpages

Question

I am using the current newest ExtLibs, and a Domino 9.0.1 Server with FP3.
I am trying set up my own multi level categorized view with repeat controls that are getting data from an SQLite Database, and I am hitting a snag with the pager controls.
Structure
I have a primary Repeat Control that displays 5 categories at a time (Sections). This is connected to the primary pager.
Inside this repeat control, I have a panel that has another repeat control for the actual data. (In some cases I put another section to create multiple levels with another repeater...)
* The problem
When I have multiple pages on the primary repeater and I start out at page one, then in one embedded pager, I select page 2, then I select a different page on the primary pager, then all embedded pagers are automatically reset to page 2. It seems to me as though the request scope variable that controls the embedded pager number is shared among all repeated instances.
What is the best way to go about solving this problem? And am I barking up the wrong tree by repeating repeaters to begin with?
******************************************* Stand alone XPage for reproduction
<?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="repeat1" panelPosition="left">
</xp:pager>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:repeat id="repeat1" rows="5" var="primaryList">
<xp:this.value><![CDATA[#{javascript:var list:java.util.ArrayList = new java.util.ArrayList();
list.add("1")
list.add("2")
list.add("3")
list.add("4")
list.add("5")
list.add("6")
list.add("7")
list.add("8")
list.add("9")
list.add("10")
list.add("11")
list.add("12")
list.add("13")
list.add("14")
list.add("15")
list.add("16")
list.add("17")
list.add("18")
return list;}]]></xp:this.value>
<xp:section id="section1" header="#{javascript:primaryList}">
<xp:br></xp:br>
<xp:panel style="padding:0px 0px 5px 40px">
<xp:pager layout="Previous Group Next"
partialRefresh="true" id="pager2" for="repeat2"
panelPosition="left">
</xp:pager>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:repeat id="repeat2" rows="5" var="innerRepeat">
<xp:this.value><![CDATA[#{javascript:var list:java.util.ArrayList = new java.util.ArrayList();
list.add("1")
list.add("2")
list.add("3")
list.add("4")
list.add("5")
list.add("6")
list.add("7")
list.add("8")
list.add("9")
list.add("10")
list.add("11")
list.add("12")
list.add("13")
list.add("14")
list.add("15")
list.add("16")
list.add("17")
list.add("18")
return list;}]]></xp:this.value>
<xp:inputText id="inputText1"
value="#{javascript:innerRepeat.toString();}">
</xp:inputText>
<xp:br></xp:br>
</xp:repeat>
</xp:panel></xp:section>
</xp:repeat>
</xp:view>
steps to reproduce
be on page one on primary pager.
in any sub pager, select page 2.
Notice correctness of other pagers
Switch main pager to page 3
Notice all sub pagers on on page 2

Answer 1

I don't think it's a bug. It's working as designed (!)...
The problem is that the repeat does not create multiple pagers inside for each iteration. So there is basically only one pager and that pager keeps only one PagerState. That's why they are acting weird.
When you use repeatControls="true" option, repeat will not iterate only one component, instead it will really create multiple components for each iteration. However, in that case, you can't use Pager component for such a repeat, because the new repeat component does not have an iterator anymore. It will not be able to find 'pagination' and will throw 'division of zero' error.
Here, I have explained the difference between two modes of Repeat component (from slide #36):
https://speakerdeck.com/sbasegmez/engage-2015-10-mistakes-you-and-every-xpages-developer-make-yes-i-said-you?slide=36
The solution would be creating your own pager design for inner repeats.
Update:
Another approach is marking the outer Repeat as repeatControls="true" and removing the outer pager. In such a configuration you'll have multiple pager components in the component tree but you have to sacrifice the outer pager. In this configuration, you'll need to load all elements in the outer repeat (because they can't be actively manipulated anymore).
To mimic the pager behaviour you can design a custom pager and use rendered attribute for inner repeats. It will slow the page down, but will provide 'paging' feeling to the user.