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.
- Control your page size from the tag given below.
- 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>
