?
Solved

google style pagination in xslt

Posted on 2009-02-18
5
Medium Priority
?
1,560 Views
Last Modified: 2013-11-19
hi, how can i put a google style pagination (show fisrt 10 pages etc.. and when click on 10 show the next ten etc....) in between below previous and next links?

here the xslt i am using

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="3.2" encoding="ISO-8859-1"/>
<xsl:param name="Page" select="0" />
<xsl:param name="PageSize" select="1" />
 
<xsl:template name="results" match="/">
<xsl:variable name="mycount" select="count(root/customer)"/>
<xsl:variable name="selectedRowCount" select="round($mycount div $PageSize)"/>
      <xsl:for-each select="root/customer">
       <!-- Pagination logic -->
       <xsl:if test="position() &gt;= ($Page * $PageSize) + 1">
        <xsl:if test="position() &lt;= $PageSize + ($PageSize * $Page)">
         <!-- Do display here -->
         
        </xsl:if>
       </xsl:if>
      </xsl:for-each>
      <!-- Prev link for pagination -->
      <xsl:choose>
       <xsl:when test="number($Page)-1 &gt;= 0">&#160;
        <A>
         <xsl:attribute name="href">_dirresult?page=<xsl:value-of select="number($Page)-1"/>&amp;pagesize=<xsl:value-of
select="$PageSize"/></xsl:attribute>
          &lt;&lt;Prev
        </A>
       </xsl:when>
       <xsl:otherwise>
        <!-- display something else -->
       </xsl:otherwise>
      </xsl:choose>
     
      <xsl:if test="$selectedRowCount &gt; 1">
       &#160;<b class="blacktext"><xsl:value-of select="number($Page)+1"/>&#160;of&#160;<xsl:value-of
select="number($selectedRowCount)"/></b>&#160;
      </xsl:if>
               
      <!-- Next link for pagination -->
      <xsl:choose>
       <xsl:when test="number($Page)+1 &lt; number($selectedRowCount)">&#160;
        <A>
         <xsl:attribute name="href">_dirresult?page=<xsl:value-of select="number($Page)+1"/>&amp;pagesize=<xsl:value-of
select="$PageSize"/></xsl:attribute>
          Next&gt;&gt;
        </A>
       </xsl:when>
       <xsl:otherwise>
        <!-- display something else -->
       </xsl:otherwise>
      </xsl:choose>  
 </xsl:template>
</xsl:stylesheet>


i found this code (see below link) but don't know how to include it in the code to make it work. please some help, thanks.

http://briancaos.wordpress.com/2009/01/28/create-a-google-style-paging-component-in-xslt/
0
Comment
Question by:eaweb
  • 3
  • 2
5 Comments
 
LVL 39

Accepted Solution

by:
abel earned 2000 total points
ID: 23723071
I looked a bit at the link you provided, and followed the instructions. Indeed, it helps if you know a bit of XSLT because the code provided there contained some mistakes. I added some logic to it, now you can also select how many items per page and how wide the google-pages should be before and after the currently selected item. The layout is up to you, the output uses UL/LI items, which can be laid out to whatever you like.

To call the code, just cut and paste it into your XSLT stylesheet document. Call it with a (dummy, but correct) source XML file and run it with the four parameters set to whatever you like. The output will be a list according to the "rules" of google. The four parameters are, in the code snippet, set to test values 6493, 24, 10 and 15 respectively:

numberOfItems
currentPage
itemsPerPage
maxBeforeAfterCurrent

Have fun with it!

-- Abel --

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
>
    <xsl:output method="xml" indent="yes"/>
 
    <xsl:param name="numberOfItems" select="6493" />
    <xsl:param name="currentPage" select="24"  />
    <xsl:param name="itemsPerPage" select="10" />
    <xsl:param name="maxBeforeAfterCurrent" select="15" />
 
 
    <xsl:template match="/">
        <xsl:call-template name="tplPaging" />
    </xsl:template>
 
    <xsl:template name="tplPaging">
 
        <!-- Calculate the maximum number of pages to show in the paging component -->
        <xsl:variable name="numberOfPages" select="floor((number($numberOfItems)-1) div $itemsPerPage)+1"/>
 
        <!-- Calaulate the starting position of the numbers -->
        <xsl:variable name="startPage">
            <xsl:choose>
                <xsl:when test="$currentPage > ($maxBeforeAfterCurrent + 1)">
                    <xsl:value-of select="$currentPage - $maxBeforeAfterCurrent"/>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:value-of select="1"/>
                </xsl:otherwise>
            </xsl:choose>
        </xsl:variable>
 
        <!-- Calculate the ending position of the numbers -->
        <xsl:variable name="endPage">
            <xsl:choose>
                <xsl:when test="($numberOfPages - $currentPage) > $maxBeforeAfterCurrent">
                    <xsl:value-of select="$currentPage + $maxBeforeAfterCurrent"/>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:value-of select="$numberOfPages"/>
                </xsl:otherwise>
            </xsl:choose>
        </xsl:variable>
 
 
        <!-- Recursively draw the paging component -->
        <ul>
            <xsl:if test="$startPage > 1">
                <li>
                    <a href="?page={$currentPage - ($maxBeforeAfterCurrent + 1)}">Previous</a>
                </li>
            </xsl:if>
            <xsl:call-template name="tplNumber">
                <xsl:with-param name="current" select="$currentPage"/>
                <xsl:with-param name="number" select="$startPage"/>
                <xsl:with-param name="max" select="$endPage"/>
            </xsl:call-template>
            <xsl:if test="($currentPage + $maxBeforeAfterCurrent) &lt; $numberOfPages">
                <li>
                    <a href="?page={$currentPage + $maxBeforeAfterCurrent + 1}">Next</a>
                </li>
            </xsl:if>
        </ul>
    </xsl:template>
 
    <xsl:template name="tplNumber">
        <xsl:param name="current"/>
        <xsl:param name="number"/>
        <xsl:param name="max"/>
 
        <xsl:choose>
            <xsl:when test="$number = $current">
                <!-- Show current page without a link -->
                <li class="current">
                    <xsl:value-of select="$number"/>
                </li>
            </xsl:when>
            <xsl:otherwise>
                <li>
                    <a href="?page={$number}">
                        <xsl:value-of select="$number"/>
                    </a>
                </li>
            </xsl:otherwise>
        </xsl:choose>
 
        <!-- Recursively call the template untill we reach the max number of pages -->
        <xsl:if test="$number &lt; $max">
            <xsl:call-template name="tplNumber">
                <xsl:with-param name="current" select="$current"/>
                <xsl:with-param name="number" select="$number + 1"/>
                <xsl:with-param name="max" select="$max"/>
            </xsl:call-template>
        </xsl:if>
    </xsl:template>
</xsl:stylesheet>

Open in new window

0
 

Author Comment

by:eaweb
ID: 23735499
hi i have the following:

**********************************

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="3.2" encoding="ISO-8859-1"/>
<xsl:param name="PageNr" select="0" />
<xsl:param name="PageSize" select="1" />
<xsl:param name="lastOrRequested" select="0" />
<xsl:param name="requestedAcoount" select="0" />
<xsl:param name="requestedDate" select="0" />

    <xsl:param name="numberOfItems" select="6493" />
    <xsl:param name="currentPage" select="24"  />
    <xsl:param name="itemsPerPage" select="10" />
    <xsl:param name="maxBeforeAfterCurrent" select="15" />


<xsl:template name="tplPaging">
 
        <!-- Calculate the maximum number of pages to show in the paging component -->
        <xsl:variable name="numberOfPages" select="floor((number($numberOfItems)-1) div $itemsPerPage)+1"/>
 
        <!-- Calaulate the starting position of the numbers -->
        <xsl:variable name="startPage">
            <xsl:choose>
                <xsl:when test="$currentPage > ($maxBeforeAfterCurrent + 1)">
                    <xsl:value-of select="$currentPage - $maxBeforeAfterCurrent"/>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:value-of select="1"/>
                </xsl:otherwise>
            </xsl:choose>
        </xsl:variable>
 
        <!-- Calculate the ending position of the numbers -->
        <xsl:variable name="endPage">
            <xsl:choose>
                <xsl:when test="($numberOfPages - $currentPage) > $maxBeforeAfterCurrent">
                    <xsl:value-of select="$currentPage + $maxBeforeAfterCurrent"/>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:value-of select="$numberOfPages"/>
                </xsl:otherwise>
            </xsl:choose>
        </xsl:variable>
 
 
        <!-- Recursively draw the paging component -->
        <ul>
            <xsl:if test="$startPage > 1">
                <li>
                    <a href="?page={$currentPage - ($maxBeforeAfterCurrent + 1)}">Previous</a>
                </li>
            </xsl:if>
            <xsl:call-template name="tplNumber">
                <xsl:with-param name="current" select="$currentPage"/>
                <xsl:with-param name="number" select="$startPage"/>
                <xsl:with-param name="max" select="$endPage"/>
            </xsl:call-template>
            <xsl:if test="($currentPage + $maxBeforeAfterCurrent) < $numberOfPages">
                <li>
                    <a href="?page={$currentPage + $maxBeforeAfterCurrent + 1}">Next</a>
                </li>
            </xsl:if>
        </ul>
    </xsl:template>
 
    <xsl:template name="tplNumber">
        <xsl:param name="current"/>
        <xsl:param name="number"/>
        <xsl:param name="max"/>
 
        <xsl:choose>
            <xsl:when test="$number = $current">
                <!-- Show current page without a link -->
                <li class="current">
                    <xsl:value-of select="$number"/>
                </li>
            </xsl:when>
            <xsl:otherwise>
                <li>
                    <a href="?page={$number}">
                        <xsl:value-of select="$number"/>
                    </a>
                </li>
            </xsl:otherwise>
        </xsl:choose>
 
        <!-- Recursively call the template untill we reach the max number of pages -->
        <xsl:if test="$number < $max">
            <xsl:call-template name="tplNumber">
                <xsl:with-param name="current" select="$current"/>
                <xsl:with-param name="number" select="$number + 1"/>
                <xsl:with-param name="max" select="$max"/>
            </xsl:call-template>
        </xsl:if>
    </xsl:template>



<xsl:template name="results" match="/">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="images/eibStatement.css" rel="stylesheet" type="text/css" />
<link href="images/printStatement.css" rel="stylesheet" type="text/css" media="print" />
<script type="text/javascript" src="validateStm.js"></script>
</head>
<body>

<xsl:variable name="mycount" select="count(cas/cap)"/>
<xsl:variable name="selectedRowCount" select="round($mycount div $PageSize)"/>

<xsl:call-template name="tplPaging" />
     
        
</body>
</html>       
          
 </xsl:template>
</xsl:stylesheet>

**********************************

my numberOfPages = selectedRowCount which is in the
<xsl:template name="results" match="/">

how do i get it in the tplpaging

the  <xsl:param name="maxBeforeAfterCurrent" select="15" /> what is it exactly

as current page i have Pagenr.

how must i configure what i have to suite the code?
0
 

Author Comment

by:eaweb
ID: 23737669
ok i got it working it with this code on top:

<xsl:variable name="googlestylepagecount" select="count(cas/cap)"/>
<xsl:variable name="googlestylemaxpagecount" select="round($googlestylepagecount div $PageSize)"/>

<xsl:param name="numberOfItems" select="$googlestylemaxpagecount" />
<xsl:param name="currentPage" select="number($PageNr + 1)"  />
<xsl:param name="itemsPerPage" select="1" />
<xsl:param name="maxBeforeAfterCurrent" select="9" />
0
 

Author Closing Comment

by:eaweb
ID: 31548502
great!!!
0
 
LVL 39

Expert Comment

by:abel
ID: 23738579
Great that it works now! Glad I could've been of some help
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question