ClientSideAsp.Net

I wanted to implement Digg like pagination in one of my recent project with Umbraco XSLT lists and I have done it using the pretty JQuery plugin available here

http://plugins.jquery.com/project/pagination

Please note that its not an SEO friendly solution since the pagination is completely relied on JQuery and will not be available if the JavaScript is turned off.. as an alternative for search engines/no-javascript browsers I have added a simple Next Previous navigation inside a <noscript> tag..

Steps

1. Download and include the jquery.pagination.js and pagination.css in your template
2. Open jquery.pagination.js and comment line 123 ( //$(‘a’, fragment).click(eventHandler); ) .. Alternatively you can download the altered JQuery plugin from here.
3. Follow the code sample below or download the XSLT sample- comments are added in each line. If you have any doubts let me know through the comments

<xsl:template match="/">

<xsl:variable name="records" select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']"/>    <!-- get your data -->
<xsl:variable name="numberOfRecords" select="count($records)"/>    <!-- total number of items -->
<xsl:variable name="recordsPerPage" select="1"/>    <!--make as a macro param if you want -->
<xsl:variable name="totalPageCount" select="ceiling($numberOfRecords div $recordsPerPage)" />    <!-- total number of pages -->
<xsl:variable name="pageNumber" >      <!-- get the page index from query string -->
<xsl:choose>
<xsl:when test="string(umbraco.library:RequestQueryString('page')) = '' or number(umbraco.library:RequestQueryString('page')) &amp;amp;amp;amp;amp;lt;= 0 or string(umbraco.library:RequestQueryString('page')) = 'NaN'">
0       <!-- if no page number is specified.. consider it as page 0 -->
</xsl:when>
<xsl:when test="number(umbraco.library:RequestQueryString('page')) &amp;amp;amp;amp;amp;gt; $totalPageCount - 1">
<xsl:value-of select="$totalPageCount - 1"/> <!-- if page number specified is greater than total number of pages.. consider it as last page -->
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="umbraco.library:RequestQueryString('page')"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>

<xsl:for-each select="$records"> <!-- print current page records -->
<xsl:if test="position() &amp;amp;amp;amp;amp;gt; $recordsPerPage * number($pageNumber) and position() &amp;amp;amp;amp;amp;lt;= number($recordsPerPage * number($pageNumber) + $recordsPerPage )">
<p>
<xsl:value-of select="@nodeName"/>
</p>
</xsl:if>
</xsl:for-each>

<!-- Create pagination start -->
<xsl:if test="$numberOfRecords &amp;amp;amp;amp;amp;gt; $recordsPerPage">      <!-- print the page only if there is more than one page -->
<script type="text/javascript">        <!-- setup the pagination script based on parameters -->
$(document).ready(function(){
$(".pagination").pagination(<xsl:value-of select="$numberOfRecords" />,
{
num_edge_entries: 2
, items_per_page:<xsl:value-of select="$recordsPerPage" />
, current_page:<xsl:value-of select="$pageNumber" />
, link_to: '?page=__id__'
});
});
</script>
<div class="pagination"> <!-- the pagination will be created inside this div -->
<noscript> <!-- for users/crawlers who dont have js -->
<xsl:if test="$pageNumber &amp;amp;amp;amp;amp;gt; 0">
<a href="?page={$pageNumber -1}">previous </a>
</xsl:if>
<xsl:if test="(($pageNumber +1 ) * $recordsPerPage ) &amp;amp;amp;amp;amp;lt; ($numberOfRecords)">
<a href="?page={$pageNumber +1}">next</a>
</xsl:if>
</noscript>
</div>
</xsl:if>
<!-- Create pagination end -->
</xsl:template>

Resources

1. JQuery Pagination plugin home http://plugins.jquery.com/project/pagination
2. JQuery Pagination plugin documentation https://github.com/gbirke/jquery_pagination#readme
3. Sample XSLT file with pagination implemented http://www.clientsideasp.net/wp-content/uploads/2011/04/digg-like-xslt-pagination-sample.xslt

To Dos

1. Make the pagination index start from 1.
2. Create an XSLT extension so that the pagination will not be relied on Javascript

Thanks for reading my blog.. let me know your thoughts