The blog explains to add paging to our XSLTListViewWebPart in Sharepoint 2010.
- Create a customized html by going through one of my last blog. Click here to read my last blog.
- Once you have the html. There are few small things you need to keep in mind.
- Control your page size from the tag given below.
<RowLimit Paged="TRUE">2</RowLimit>
- There are 3 major templates which you need to take care of for the paging. There will be an attribute "ddwrt:ghost="hide"" in all 3 of them. Remove them from it as it wont allow your template to get into shape.
<xsl:template name="pagingButtons">
<xsl:template name="CommandFooter">
<xsl:template name="Navigation">
- In the template name Naviagtion, You can delete everything for customization, but not "id="bottomPagingCell{$WPQ}"". You will have to assign that to any element.
- Call the template from main row.
<xsl:call-template name="pagingButtons" />
- Here are the images with myself customizing the paging.
- Have a look at the view what i have created for the custom paging. Below given xsl style is the complete working example for the screenshots above.
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:sharepoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal"
xmlns:o="urn:schemas-microsoft-com:office:office" ddwrt:ghost="show_all">
<xsl:include href="/_layouts/xsl/main.xsl" />
<xsl:include href="/_layouts/xsl/internal.xsl" />
<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes" />
<xsl:output method='html' indent='yes' />
<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
xmlns:sharepoint="Microsoft.SharePoint.WebControls" xmlns:o="urn:schemas-microsoft-com:office:office"
ddwrt:ghost="" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row[$EntityName = '' or (position() >= $FirstRow and position() <= $LastRow)]" />
<table cellpadding="10" cellspacing="0" border="1" style="padding:25px;">
<tr>
<td colspan='2'>
<b style="font-size:25px;">Friend's List</b>
</td>
</tr>
<xsl:for-each select="$Rows">
<xsl:call-template name="RowView">
</xsl:call-template>
</xsl:for-each>
<tr>
<td colspan="2"><xsl:call-template name="pagingButtons" /></td>
</tr>
</table>
</xsl:template>
<xsl:template name="RowView">
<xsl:variable name="thisNode" select="." />
<tr>
<td align="center">
<img style="height:100px;border:5px solid #888;">
<xsl:attribute name="src">
<xsl:value-of select="@Picture"></xsl:value-of>
</xsl:attribute>
<xsl:attribute name="alt">
<xsl:value-of select="@Title"></xsl:value-of>
</xsl:attribute>
</img>
</td>
<td valign="top">
<b>Name : </b>
<xsl:value-of select="@Title"></xsl:value-of>
<br></br>
<b>Email : </b>
<xsl:value-of select="@Email" disable-output-escaping="yes"></xsl:value-of>
<br></br>
<b>Address :</b>
<br></br>
<blockquote>
<xsl:value-of select="@Address" disable-output-escaping="yes"></xsl:value-of>
</blockquote>
</td>
</tr>
</xsl:template>
<xsl:template name="pagingButtons">
<xsl:choose>
<xsl:when test="$XmlDefinition/List/@TemplateType = 106 and $XmlDefinition/@RecurrenceRowset='TRUE'">
<xsl:if test="$dvt_nextpagedata or $dvt_prevpagedata">
<xsl:call-template name="CalendarExpandedRecurrenceFooter"/>
</xsl:if>
</xsl:when>
<xsl:otherwise>
<xsl:if test="$XmlDefinition/RowLimit[@Paged='TRUE']">
<xsl:call-template name="CommandFooter">
<xsl:with-param name="FirstRow" select="$FirstRow" />
<xsl:with-param name="LastRow" select="$LastRow" />
<xsl:with-param name="dvt_RowCount" select="$dvt_RowCount" />
</xsl:call-template>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template name="CommandFooter">
<xsl:param name="FirstRow" select="1"/>
<xsl:param name="LastRow" select="1"/>
<xsl:param name="dvt_RowCount" select="1"/>
<xsl:if test="$FirstRow > 1 or $dvt_nextpagedata">
<xsl:call-template name="Navigation">
<xsl:with-param name="FirstRow" select="$FirstRow" />
<xsl:with-param name="LastRow" select="$LastRow" />
<xsl:with-param name="dvt_RowCount" select="$dvt_RowCount" />
</xsl:call-template>
</xsl:if>
</xsl:template><xsl:template name="Navigation">
<xsl:param name="FirstRow" select="1"/>
<xsl:param name="LastRow" select="1"/>
<xsl:param name="dvt_RowCount" select="1"/>
<xsl:variable name="LastRowValue">
<xsl:choose>
<xsl:when test="$EntityName = '' or $LastRow < $RowTotalCount">
<xsl:value-of select="$LastRow"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$RowTotalCount"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:variable name="NextRow">
<xsl:value-of select="$LastRowValue + 1"/>
</xsl:variable>
<table id="bottomPagingCell{$WPQ}" style="font-size:25px;width:100%;padding:5px;" border="0">
<tr>
<td style="width:50%">
<xsl:if test="$dvt_firstrow > 1">
<a>
<xsl:choose>
<xsl:when test="$dvt_RowCount = 0 and not($NoAJAX)">
<xsl:attribute name="onclick">javascript:RefreshPageTo(event, "<xsl:value-of select="$PagePath"/>?<xsl:value-of select="$ShowWebPart"/>\u0026<xsl:value-of select='$FieldSortParam'/><xsl:value-of select='$SortQueryString'/>\u0026View=<xsl:value-of select="$View"/>");javascript:return false;</xsl:attribute>
<xsl:attribute name="href">javascript:</xsl:attribute>
<img src="/_layouts/{$LCID}/images/prev.gif" border="0" alt="{$Rows/@idRewind}" />
<img src="/_layouts/{$LCID}/images/prev.gif" border="0" alt="{$Rows/@idRewind}" />
</xsl:when>
<xsl:otherwise>
<xsl:variable name="RealRowLimit">
<xsl:choose>
<xsl:when test="$XmlDefinition/Query/GroupBy[@Collapse='TRUE']/@GroupLimit">
<xsl:value-of select ="$XmlDefinition/Query/GroupBy[@Collapse='TRUE']/@GroupLimit"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select = "$XmlDefinition/RowLimit"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:choose>
<xsl:when test="not($NoAJAX)">
<xsl:attribute name="onclick">javascript:RefreshPageTo(event, "<xsl:value-of select="$PagePath"/>?<xsl:value-of select="$dvt_prevpagedata"/><xsl:value-of select="$ShowWebPart"/>\u0026PageFirstRow=<xsl:value-of select="$FirstRow - $RealRowLimit"/>\u0026<xsl:value-of select='$FieldSortParam'/><xsl:value-of select='$SortQueryString'/>\u0026View=<xsl:value-of select="$View"/>");javascript:return false;</xsl:attribute>
<xsl:attribute name="href">javascript:</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="href">
javascript: <xsl:call-template name="GenFireServerEvent">
<xsl:with-param name="param" select="concat('dvt_firstrow={',$FirstRow - $XmlDefinition/RowLimit,'};dvt_startposition={',$dvt_prevpagedata,'}')"/>
</xsl:call-template>
</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
<img src="/_layouts/{$LCID}/images/prev.gif" border="0" alt="{$Rows/@idPrevious}" />Pre
</xsl:otherwise>
</xsl:choose>
</a>
</xsl:if>
</td>
<td style="width:50%" align="right">
<xsl:if test="$LastRowValue < $dvt_RowCount or string-length($dvt_nextpagedata)!=0">
<a>
<xsl:choose>
<xsl:when test="not($NoAJAX)">
<xsl:attribute name="onclick">javascript:RefreshPageTo(event, "<xsl:value-of select="$PagePath"/>?<xsl:value-of select="$dvt_nextpagedata"/><xsl:value-of select="$ShowWebPart"/>\u0026PageFirstRow=<xsl:value-of select="$NextRow"/>\u0026<xsl:value-of select='$FieldSortParam'/><xsl:value-of select='$SortQueryString'/>\u0026View=<xsl:value-of select="$View"/>");javascript:return false;</xsl:attribute>
<xsl:attribute name="href">javascript:</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="href">javascript: <xsl:call-template name="GenFireServerEvent">
<xsl:with-param name="param" select="concat('dvt_firstrow={',$NextRow,'};dvt_startposition={',$dvt_nextpagedata,'}')"/>
</xsl:call-template>
</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
Next<img src="/_layouts/{$LCID}/images/next.gif" border="0" alt="{$Rows/@tb_nextpage}" />
</a>
</xsl:if>
</td>
</tr>
</table>
<xsl:if test="not($GroupingRender)">
<script>
var topPagingCell = document.getElementById("topPagingCell<xsl:value-of select="$WPQ" />");
var bottomPagingCell = document.getElementById("bottomPagingCell<xsl:value-of select="$WPQ" />");
if (topPagingCell != null && bottomPagingCell != null)
{
topPagingCell.innerHTML = bottomPagingCell.innerHTML;
}
</script>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
