Need (again) some help on paginate a rather simple xml table data displaying only one record at a time, but as a stacked nodes like this:

 |================|
 |      FNAME     |
 |----------------| 
 |      Smith     |   
 |----------------| 
 |     LNAME      | 
 |----------------| 
 |     Milton     |
 |----------------|
 |       AGE      | 
 |----------------| 
 |       44       | 
 |----------------|
 |     ADDRESS    |  
 |----------------|
 |5th smmr st,mntb| 
 |----------------| 
 |      CITY      | 
 |----------------|  
 |    Portland    |  
 |================| 
<<  < pag 1/6 >  >>
  =================

and with "first prev page next last" links at a bottom of a table for one to advance over next prev first and last record; as it is showcased up there in a picture. Those <a href links are, of course, bound by few js functions which I also showed further down...
This is rather an old question raised up here a couple of years ago: XML table columns vertically stacked within rows but hasn't got those moving around links ...
Xml file is as follows:

<persns> 
 <prsn> 
  <fname>Smith</fname> 
  <lname>Milton</lname> 
  <age>44</age> 
  <addrss>5th summer st, mntb</addrss>
  <city>Portland</city>
 </prsn>
 <prsn> 
  <fname>Ken</fname> 
  <lname>Jackson</lname> 
  <age>37</age> 
  <addrss>19th Penfield ave, brtcl</addrss>
  <city>Kelowna</city>
 </prsn>
 <prsn> 
  <fname>Susan</fname> 
  <lname>Arkland</lname> 
  <age>48</age> 
  <addrss>34th Mansfield st, sgtp</addrss>
  <city>Raleigh</city>
 </prsn>
 <prsn> 
  <fname>Smith</fname> 
  <lname>Milton</lname> 
  <age>44</age> 
  <addrss>5th summer st, mntb</addrss>
  <city>Portland</city>
 </prsn>
 <prsn> 
  <fname>Ken</fname> 
  <lname>Jackson</lname> 
  <age>37</age> 
  <addrss>19th Penfield ave, brtcl</addrss>
  <city>Kelowna</city>
 </prsn>
 <prsn> 
  <fname>Susan</fname> 
  <lname>Arkland</lname> 
  <age>48</age> 
  <addrss>34th Mansfield st, sgtp</addrss>
  <city>Raleigh</city>
 </prsn>
</persns>

and xslt is also like this:

<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xsl:variable name="pags" select="count(//prsn)"/>
<xsl:template match="prsns">
 <xsl:apply-templates select="prsn[position()]"/>
</xsl:template>
<xsl:template match="prsn">
<xsl:variable name="pag" select="position()"/>
 <table border="1" id='content{$pag}' width="170" height="170" style="text-align:center;margin-left:297px; border-collapse:collapse; margin-top:22px;">
 <tr><th>Frst Name</th></tr><tr><td><xsl:value-of select="."/></td></tr>  
 <tr><th>Last Name</th></tr><tr><td><xsl:value-of select="."/></td></tr> 
 <tr><th>Age</th></tr> <tr><td><xsl:value-of select="."/> </td></tr>
 <tr><th>Address</th></tr> <tr><td><xsl:value-of select="."/> </td></tr>
  <tr><th>City</th></tr><tr><td><xsl:value-of select="."/></td></tr>
   <!-- pagination area -->
 <tr>   
 <td colspan="4" style="background-color: #FCF3CF"> <!-- #FCF3CF -->
 <div  style="margin-top:3.99px;height:21px;margin-left:23px; margin-right:30px">
  <xsl:choose>
   <xsl:when test="$pag = 1">
   <xsl:text>pag</xsl:text><xsl:text> </xsl:text>
  <xsl:value-of select="$pag"/>
  <xsl:value-of select="'/'"/>      
  <xsl:value-of select="$pags"/>      
  <xsl:text>&#x20;</xsl:text>
  <!--<xsl:value-of select="''"/> -->
 <a href="#{$pag 1}" onclick="nextPage({$pag 1})">&#8250;</a> <!--  >  -->
 <xsl:text>&#x20;</xsl:text>
 <a href="#{$pags}" onclick="lastPage({$pags})">&#187;</a>  <!-- >> -->
   </xsl:when>
   <xsl:when test="$pag = $pags">
    <xsl:value-of select="' '"/>
 <a href="#{$pags - ($pags -1)}" onclick="firstPage({$pags - ($pags -1)})">&#171;</a>  <!--  << -->
 <a href="#{$pag - 1}" onclick="prevPage({$pag - 1})">&#8249;</a>  <!--  < -->
   <xsl:text> </xsl:text> <xsl:text>pag</xsl:text>  
  <xsl:value-of select="' '"/> 
  <xsl:value-of select="$pag"/>
  <xsl:value-of select="'/'"/>  
  <xsl:value-of select="$pags"/>
 </xsl:when>
 <xsl:otherwise>
 <a href="#" onclick=" ">&#171;</a>   <!--  << -->
 <a href="#{$pag - 1}" onclick="prevPage({$pag - 1})">&#8249;</a>  <!--  < -->
   <xsl:text>pag</xsl:text>
   <xsl:value-of select="' '"/>      
   <xsl:value-of select="$pag"/>      
   <xsl:value-of select="'/'"/> 
   <xsl:value-of select="$pags"/>
   <xsl:value-of select="' '"/>
 <a href="#{$pag 1}" onclick="nextPage({$pag 1})">&#8250;</a>  <!--  >  -->
  <a href="#" onclick="">&#187;</a> <!--  >> -->
   </xsl:otherwise>
  </xsl:choose>
  </div>
  </td>
 </tr>
</table>
</xsl:template>
</xsl:stylesheet>

I've got also a small js script through which paging advance is employed:

function nextPage(num)
{
document.getElementById("content" num).style.display=""
 num--
document.getElementById("content" num).style.display="none"
}

function prevPage(num)
{
document.getElementById("content" num).style.display=""
 num  
document.getElementById("content" num).style.display="none"
}

function lastPage(num)
{
document.getElementById("content" num).style.display=""
 num = num-(num-1) //2 
document.getElementById("content" num).style.display="none"
}

function firstPage(num)
{
document.getElementById("content" num).style.display=""
 num  = num   num // 2 (num-1)
document.getElementById("content" num).style.display="none"
}

Of course all these goes through a some index.html where everything should be displayed over the web. Got a couple of problems though:

• xslt stylesheet's condition is wrong: <xsl:template match="prsns"> <xsl:apply-templates select="prsn[position()]"/> </xsl:template>
• and also individual table cells displaying is also wrong

as I need to display each and every xml node value for one html table row Aș such the whole displaying is something like: [html table rows wrong display ](https://i.stack.imgur.com/kEw6Q.png) So you guys please help me with this so I can successfully complete my task Thank you in advance Regards

CodePudding user response：

The XSLT matches on the wrong element name (e.g. <xsl:template match="prsns"> should be <xsl:template match="persns">), then I think you need to add some HTML structure and make sure you output the script; I couldn't make sense of the last and first page functions so I adjusted them; I also used XSLT 3 instead of 2:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  version="3.0"
  xmlns:xs="http://www.w3.org/2001/XMLSchema"
  exclude-result-prefixes="#all"
  expand-text="yes">

  <xsl:output method="html" indent="yes" html-version="5"/>

  <xsl:template match="/" name="xsl:initial-template">
    <html>
      <head>
        <title>Test</title>
        <script xsl:expand-text="no">
function nextPage(num)
{
document.getElementById("content" num).style.display=""
 num--
document.getElementById("content" num).style.display="none"
}

function prevPage(num)
{
document.getElementById("content" num).style.display=""
 num  
document.getElementById("content" num).style.display="none"
}

function lastPage(num)
{
document.getElementById("content" pages).style.display=""
document.getElementById("content" num).style.display="none"
}

function firstPage(num)
{
document.getElementById("content" 1).style.display=""
document.getElementById("content" num).style.display="none"
}          
        </script>
      </head>
      <body>
        <xsl:apply-templates/>
      </body>
    </html>
  </xsl:template>

<xsl:variable name="pags" select="count(//prsn)"/>
<xsl:template match="persns">
 <script>
   var pages = {$pags};
 </script>
 <xsl:apply-templates select="prsn"/>
</xsl:template>
<xsl:template match="prsn">
<xsl:variable name="pag" select="position()"/>
 <table border="1" id='content{$pag}' width="170" height="170" style="text-align:center;margin-left:297px; border-collapse:collapse; margin-top:22px; {if (position() != 1) then 'display: none;' else 'display: table;'}">
 <tr><th>Frst Name</th></tr><tr><td><xsl:value-of select="fname"/></td></tr>  
 <tr><th>Last Name</th></tr><tr><td><xsl:value-of select="lname"/></td></tr> 
 <tr><th>Age</th></tr> <tr><td><xsl:value-of select="age"/> </td></tr>
 <tr><th>Address</th></tr> <tr><td><xsl:value-of select="addrss"/> </td></tr>
  <tr><th>City</th></tr><tr><td><xsl:value-of select="city"/></td></tr>
   <!-- pagination area -->
 <tr>   
 <td colspan="4" style="background-color: #FCF3CF"> <!-- #FCF3CF -->
 <div  style="margin-top:3.99px;height:21px;margin-left:23px; margin-right:30px">
  <xsl:choose>
   <xsl:when test="$pag = 1">
   <xsl:text>pag</xsl:text><xsl:text> </xsl:text>
  <xsl:value-of select="$pag"/>
  <xsl:value-of select="'/'"/>      
  <xsl:value-of select="$pags"/>      
  <xsl:text>&#x20;</xsl:text>
  <!--<xsl:value-of select="''"/> -->
 <a href="#{$pag 1}" onclick="nextPage({$pag 1}); return false;"> &#8250; </a> <!--  >  -->
 <xsl:text>&#x20;</xsl:text>
 <a href="#{$pags}" onclick="lastPage({$pag}); return false;"> &#187; </a>  <!-- >> -->
   </xsl:when>
   <xsl:when test="$pag = $pags">
    <xsl:value-of select="' '"/>
 <a href="#{$pags - ($pags -1)}" onclick="firstPage({$pag}); return false;"> &#171; </a>  <!--  << -->
 <a href="#{$pag - 1}" onclick="prevPage({$pag - 1}); return false;"> &#8249; </a>  <!--  < -->
   <xsl:text> </xsl:text> <xsl:text>pag</xsl:text>  
  <xsl:value-of select="' '"/> 
  <xsl:value-of select="$pag"/>
  <xsl:value-of select="'/'"/>  
  <xsl:value-of select="$pags"/>
 </xsl:when>
 <xsl:otherwise>
 <a href="#" onclick="return false;"> &#171; </a>   <!--  << -->
 <a href="#{$pag - 1}" onclick="prevPage({$pag - 1}); return false;"> &#8249; </a>  <!--  < -->
   <xsl:text>pag</xsl:text>
   <xsl:value-of select="' '"/>      
   <xsl:value-of select="$pag"/>      
   <xsl:value-of select="'/'"/> 
   <xsl:value-of select="$pags"/>
   <xsl:value-of select="' '"/>
 <a href="#{$pag 1}" onclick="nextPage({$pag 1}); return false"> &#8250; </a>  <!--  >  -->
  <a href="#" onclick="return false;"> &#187; </a> <!--  >> -->
   </xsl:otherwise>
  </xsl:choose>
  </div>
  </td>
 </tr>
</table>
</xsl:template>
</xsl:stylesheet>

Output e.g.

<!DOCTYPE HTML><html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Test</title><script>
function nextPage(num)
{
document.getElementById("content" num).style.display=""
 num--
document.getElementById("content" num).style.display="none"
}

function prevPage(num)
{
document.getElementById("content" num).style.display=""
 num  
document.getElementById("content" num).style.display="none"
}

function lastPage(num)
{
document.getElementById("content" pages).style.display=""
document.getElementById("content" num).style.display="none"
}

function firstPage(num)
{
document.getElementById("content" 1).style.display=""
document.getElementById("content" num).style.display="none"
}          
        </script></head>
   <body><script>
   var pages = 6;
 </script><table border="1" id="content1" width="170" height="170" style="text-align:center;margin-left:297px; border-collapse:collapse; margin-top:22px; display: table;">
         <tr>
            <th>Frst Name</th>
         </tr>
         <tr>
            <td>Smith</td>
         </tr>
         <tr>
            <th>Last Name</th>
         </tr>
         <tr>
            <td>Milton</td>
         </tr>
         <tr>
            <th>Age</th>
         </tr>
         <tr>
            <td>44</td>
         </tr>
         <tr>
            <th>Address</th>
         </tr>
         <tr>
            <td>5th summer st, mntb</td>
         </tr>
         <tr>
            <th>City</th>
         </tr>
         <tr>
            <td>Portland</td>
         </tr>
         <tr>
            <td colspan="4" style="background-color: #FCF3CF">
               <div  style="margin-top:3.99px;height:21px;margin-left:23px; margin-right:30px">pag 1/6 <a href="#2" onclick="nextPage(2); return false;"> › </a> <a href="#6" onclick="lastPage(1); return false;"> » </a></div>
            </td>
         </tr>
      </table>
      <table border="1" id="content2" width="170" height="170" style="text-align:center;margin-left:297px; border-collapse:collapse; margin-top:22px; display: none;">
         <tr>
            <th>Frst Name</th>
         </tr>
         <tr>
            <td>Ken</td>
         </tr>
         <tr>
            <th>Last Name</th>
         </tr>
         <tr>
            <td>Jackson</td>
         </tr>
         <tr>
            <th>Age</th>
         </tr>
         <tr>
            <td>37</td>
         </tr>
         <tr>
            <th>Address</th>
         </tr>
         <tr>
            <td>19th Penfield ave, brtcl</td>
         </tr>
         <tr>
            <th>City</th>
         </tr>
         <tr>
            <td>Kelowna</td>
         </tr>
         <tr>
            <td colspan="4" style="background-color: #FCF3CF">
               <div  style="margin-top:3.99px;height:21px;margin-left:23px; margin-right:30px"><a href="#" onclick="return false;"> « </a><a href="#1" onclick="prevPage(1); return false;"> ‹ </a>pag 2/6 <a href="#3" onclick="nextPage(3); return false"> › </a><a href="#" onclick="return false;"> » </a></div>
            </td>
         </tr>
      </table>
      <table border="1" id="content3" width="170" height="170" style="text-align:center;margin-left:297px; border-collapse:collapse; margin-top:22px; display: none;">
         <tr>
            <th>Frst Name</th>
         </tr>
         <tr>
            <td>Susan</td>
         </tr>
         <tr>
            <th>Last Name</th>
         </tr>
         <tr>
            <td>Arkland</td>
         </tr>
         <tr>
            <th>Age</th>
         </tr>
         <tr>
            <td>48</td>
         </tr>
         <tr>
            <th>Address</th>
         </tr>
         <tr>
            <td>34th Mansfield st, sgtp</td>
         </tr>
         <tr>
            <th>City</th>
         </tr>
         <tr>
            <td>Raleigh</td>
         </tr>
         <tr>
            <td colspan="4" style="background-color: #FCF3CF">
               <div  style="margin-top:3.99px;height:21px;margin-left:23px; margin-right:30px"><a href="#" onclick="return false;"> « </a><a href="#2" onclick="prevPage(2); return false;"> ‹ </a>pag 3/6 <a href="#4" onclick="nextPage(4); return false"> › </a><a href="#" onclick="return false;"> » </a></div>
            </td>
         </tr>
      </table>
      <table border="1" id="content4" width="170" height="170" style="text-align:center;margin-left:297px; border-collapse:collapse; margin-top:22px; display: none;">
         <tr>
            <th>Frst Name</th>
         </tr>
         <tr>
            <td>Smith</td>
         </tr>
         <tr>
            <th>Last Name</th>
         </tr>
         <tr>
            <td>Milton</td>
         </tr>
         <tr>
            <th>Age</th>
         </tr>
         <tr>
            <td>44</td>
         </tr>
         <tr>
            <th>Address</th>
         </tr>
         <tr>
            <td>5th summer st, mntb</td>
         </tr>
         <tr>
            <th>City</th>
         </tr>
         <tr>
            <td>Portland</td>
         </tr>
         <tr>
            <td colspan="4" style="background-color: #FCF3CF">
               <div  style="margin-top:3.99px;height:21px;margin-left:23px; margin-right:30px"><a href="#" onclick="return false;"> « </a><a href="#3" onclick="prevPage(3); return false;"> ‹ </a>pag 4/6 <a href="#5" onclick="nextPage(5); return false"> › </a><a href="#" onclick="return false;"> » </a></div>
            </td>
         </tr>
      </table>
      <table border="1" id="content5" width="170" height="170" style="text-align:center;margin-left:297px; border-collapse:collapse; margin-top:22px; display: none;">
         <tr>
            <th>Frst Name</th>
         </tr>
         <tr>
            <td>Ken</td>
         </tr>
         <tr>
            <th>Last Name</th>
         </tr>
         <tr>
            <td>Jackson</td>
         </tr>
         <tr>
            <th>Age</th>
         </tr>
         <tr>
            <td>37</td>
         </tr>
         <tr>
            <th>Address</th>
         </tr>
         <tr>
            <td>19th Penfield ave, brtcl</td>
         </tr>
         <tr>
            <th>City</th>
         </tr>
         <tr>
            <td>Kelowna</td>
         </tr>
         <tr>
            <td colspan="4" style="background-color: #FCF3CF">
               <div  style="margin-top:3.99px;height:21px;margin-left:23px; margin-right:30px"><a href="#" onclick="return false;"> « </a><a href="#4" onclick="prevPage(4); return false;"> ‹ </a>pag 5/6 <a href="#6" onclick="nextPage(6); return false"> › </a><a href="#" onclick="return false;"> » </a></div>
            </td>
         </tr>
      </table>
      <table border="1" id="content6" width="170" height="170" style="text-align:center;margin-left:297px; border-collapse:collapse; margin-top:22px; display: none;">
         <tr>
            <th>Frst Name</th>
         </tr>
         <tr>
            <td>Susan</td>
         </tr>
         <tr>
            <th>Last Name</th>
         </tr>
         <tr>
            <td>Arkland</td>
         </tr>
         <tr>
            <th>Age</th>
         </tr>
         <tr>
            <td>48</td>
         </tr>
         <tr>
            <th>Address</th>
         </tr>
         <tr>
            <td>34th Mansfield st, sgtp</td>
         </tr>
         <tr>
            <th>City</th>
         </tr>
         <tr>
            <td>Raleigh</td>
         </tr>
         <tr>
            <td colspan="4" style="background-color: #FCF3CF">
               <div  style="margin-top:3.99px;height:21px;margin-left:23px; margin-right:30px"> <a href="#1" onclick="firstPage(6); return false;"> « </a><a href="#5" onclick="prevPage(5); return false;"> ‹ </a> pag 6/6</div>
            </td>
         </tr>
      </table>
   </body>
</html>

<script xsl:expand-text="no"> function nextPage(num) { document.getElementById("content"+num).style.display="" num-- document.getElementById("content"+num).style.display="none" } function prevPage(num) { document.getElementById("content"+num).style.display="" num++ document.getElementById("content"+num).style.display="none" } function lastPage(num) { document.getElementById("content"+pages).style.display="" document.getElementById("content"+num).style.display="none" } function firstPage(num) { document.getElementById("content"+1).style.display="" document.getElementById("content"+num).style.display="none" } </script> <body> <script> var pages = {$pags}; </script>

Frst Name
Last Name
Age
Address
City
pag › » « ‹ pag « ‹ pag › »

&input= Smith Milton 44 5th summer st, mntb Portland Ken Jackson 37 19th Penfield ave, brtcl Kelowna Susan Arkland 48 34th Mansfield st, sgtp Raleigh Smith Milton 44 5th summer st, mntb Portland Ken Jackson 37 19th Penfield ave, brtcl Kelowna Susan Arkland 48 34th Mansfield st, sgtp Raleigh &input-type=XML" rel="nofollow noreferrer">Online sample using SaxonJS.