three xml records at once xslt mobile pagination – p.II

Back for this rather old problem about stacked paged display xml nodes on three columns.
The original question was raised up here:
three records at once xml mobile pagination on xslt
Thing is that here,
xpath predicate to limit xml nodes display
for being very glad of the way display was provided I totally forget about pagination mechanism.
I mean there were a great need for a couple of js functions (at least) to be bound over the pagination links in order for these to work.
But here is still another requirement (second one):

  • through this xml file (which I’ll show it here in a sec) there are some sub-records associated with the principal ones. And as one will display in a couple of pictures, by clicking on some small [+] sign those sub-records will expand, thus showing them accordingly. That [+] sign turned into [-] sign. And when clicked again over that [-] sign those sub-records will collapse, the displaying only showing but principal node records.
    The “pictures” are as follows:
|===========|---------------|-------------|------------|  
|   FNAME   |   Smith [+]   |  Ken   [+]  | Susan [+]  |
|===========|---------------|-------------|------------|
|   LNAME   |   Milton      |  Jackson    | Arkland    |
|===========|---------------|-------------|------------|
|    AGE    |     44        |     37      |    48      |
|===========|---------------|-------------|------------|
| ADDRESS   |5th smmr st,mntb9th Pnfeld ave 34th Mansfield st 
|===========|---------------|-------------|------------|                                        
|    CITY   |   Portland    |   Kelowna   |  Raleigh   |
|===========|---------------|-------------|------------|
|                  <<   <  1/4  >  >>                  |
|=======================================================
                 Fig. 1 First Page
           - all sub-records collapsed; one could
             notice that little [+] sign on the very 
             1'st line next over each and every name
              
|===========|---------------|-------------|------------|  
|   FNAME   |  George  [+]  |    Ron  [+] | Marie-Ann  |
|===========|---------------|-------------|------------|
|   LNAME   |    Bond       |    Davis    | Spencer    |
|===========|---------------|-------------|------------|
|    AGE    |      35       |    37       |    48      |
|===========|---------------|-------------|------------|
| ADDRESS   |5th drive, mntb|12th Greenfld ave 273 Simpson square                
|===========|---------------|-------------|------------|                                        
|    CITY   |   Albany      |    Pheonix  |  Oklahoma  |
|===========|---------------|-------------|------------|
|                  <<   <  2/4  >  >>                  |
|=======================================================
                   Fig. 2 Second Page
     - by clicking over either links (< - prev  , > - next
       << - first or >> - last) the records displaying
       will push backward or forward conesequently
       (sub-records still collapsed ...)
       
|==========|-------------|----------|-----------|------------|  
|   FNAME  |   Smith [-] |chld Name | Ken [+]   | Susan [+]  |
|==========|-------------|----------|-----------|------------|
|   LNAME  |   Milton    |  Smith   |  Jackson  |  Arkland   |
|==========|-------------|----------------------|------------|
|    AGE   |     44      |chld Sname|     37    |    48      |
|==========|-------------|----------|-----------|------------|
| ADDRESS  |5th smmr st,   Terry            Mansfield st     |
|==========|-------------|--------  |-----------|------------|                                        
|    CITY  |   Portland  |chld age  |  Kelowna  |  Raleigh   |
|==========|-------------|----------|-----------|------------|
|                       <<   <  1/4  >  >>                   |
|=============================================================               
       Fig. 3 First Page with vertically sub-records expanded
          - on the first page (Fig.1) by clicking over that
            [+] sign on top of every table's column header
            those corresponding sub-records (children stuff)
            wil get expanded (but vertically !) and be shown as such 

The xml file is this:

<persns> 
 <prsn> 
  <fname>Smith</fname> 
  <lname>Milton</lname> 
  <age>44</age> 
  <addrss>5th summer st, mntb</addrss>
  <city>Portland</city>
  <children>
    <child>
      <name>Smith</name>
      <sname>Terry</sname>
      <c_age>12</c_age>
    </child>
  </children>
 </prsn>
 <prsn> 
  <fname>Ken</fname> 
  <lname>Jackson</lname> 
  <age>37</age> 
  <addrss>19th Penfield ave, brtcl</addrss>
  <city>Kelowna</city>
 <children>
   <child>
     <name>Jackson</name>
     <sname>Grace</sname>
     <c_age>8</c_age>
    </child>
  </children>
 </prsn>
 <prsn> 
  <fname>Susan</fname> 
  <lname>Arkland</lname> 
  <age>48</age> 
  <addrss>34th Mansfield st, sgtp</addrss>
  <city>Raleigh</city>
 <children>
   <child>
     <name>Patton</name>
     <sname>Don</sname>
     <c_age>14</c_age>
    </child>
   <child>
     <name>Arkland</name>
     <sname>Rob</sname>
     <c_age>11</c_age>
    </child> 
 </children>
 </prsn>
 <prsn> 
  <fname>George</fname> 
  <lname>Bond</lname> 
  <age>35</age> 
  <addrss>5th drive, mntb</addrss>
  <city>Albany</city>
   <children>
    <child>
      <name>Bond</name>
      <sname>Areene</sname>
      <c_age>10</c_age>
    </child>
  </children>
 </prsn>
 <prsn> 
  <fname>Ron</fname> 
  <lname>Davis</lname> 
  <age>37</age> 
  <addrss>12th Greenfield ave, brtcl</addrss>
  <city>Pheonix</city>
  <children/>
 </prsn>
 <prsn> 
  <fname>Marie-Ann</fname> 
  <lname>Spencer</lname> 
  <age>48</age> 
  <addrss>273 Simpson square</addrss>
  <city>Oklahoma</city>
 <children>
   <child>
     <name>Spencer</name>
     <sname>David</sname>
     <c_age>16</c_age>
    </child>
   <child>
     <name>Spencer</name>
     <sname>Tina</sname>
     <c_age>13</c_age>
    </child> 
 </children>
 </prsn>
<prsn> 
  <fname>David</fname> 
  <lname>Rhonson</lname> 
  <age>45</age> 
  <addrss>255 Lakeland Terrace, mi</addrss>
  <city>Livonia</city>
 <children/>
 </prsn>
<prsn> 
  <fname>Buddy</fname> 
  <lname>Clark</lname> 
  <age>53</age> 
  <addrss>Lkeshore Lane
Zion, il</addrss>
  <city>Oneonta</city>
 <children>
   <child>
     <name>Clark</name>
     <sname>Susan</sname>
     <c_age>17</c_age>
    </child>
   <child>
  </children>
 </prsn>
 <prsn> 
  <fname>Peggy</fname> 
  <lname>Johnson</lname> 
  <age>42</age> 
  <addrss>w.Devon ave.
Monroe Township, nj</addrss>
  <city>New Jersey</city>
 <children>
   <child>
     <name>Friedmann </name>
     <sname>Joseph </sname>
     <c_age>17</c_age>
    </child>
   <child>
     <name>Johnson</name>
     <sname>Denise </sname>
     <c_age>14</c_age>
    </child> 
 </children>
 </prsn>
<prsn> 
  <fname>Julie</fname> 
  <lname>Nelson</lname> 
  <age>35</age> 
  <addrss>Wagon st.
Springfield,pa</addrss>
  <city>Pennsylvania</city>
 <children>
   <child>
     <name>Nelson</name>
     <sname>Patrick</sname>
     <c_age>9</c_age>
    </child>
   <child>
  </children>
 </prsn>
</persns>

And the corresponding stylesheet is this:

<xsl:stylesheet version="2.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>

<xsl:param name="pag" select="1"/>
<xsl:param name="frme" select="3"/>

<xsl:template match="/persns">
  <xsl:variable name="start" select="($pag - 1) * $frme + 1"/>
  <xsl:variable name="rec" select="prsn[position() ge $start and position() lt $start + $frme]"/>
  <table border="1">
   <xsl:for-each select="$rec[1]/*">
    <xsl:variable name="i" select="position()"/>
   <tr><th>
    <xsl:value-of select="name()"/>
    </th>   
   <xsl:for-each select="$rec">
    <td>
    <xsl:value-of select="*[$i]"/>
    </td>
   </xsl:for-each>
   </tr>
  </xsl:for-each>
 </table>
</xsl:template>

</xsl:stylesheet>

And the last part will be the js functions which should be bound over the pagination links/buttons for the whole process kicked off.
So, the two requirements on brief :

  • vertical expand/collapse of xml sub-records when clicked over those [+]/[-] signs
  • pagination mechanism (through some js) which allows moving backwards / forwards
    Really hope I made myself clear enough for one to Really understand my needs.
    Thank you very much and please you guys help me with all these