Sharepoint 2010 Customize Paging in XSLTListViewWebPart

The blog explains to add paging to our XSLTListViewWebPart in Sharepoint 2010.

1. Create a customized html by going through one of my last blog. Click here to read my last blog.
2. Once you have the html. There are few small things you need to keep in mind.
   1. Control your page size from the tag given below.
      

      <RowLimit Paged="TRUE">2</RowLimit>

   2. 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">
      

   3. 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.
3. Call the template from main row.
   

   <xsl:call-template name="pagingButtons" />

4. Here are the images with myself customizing the paging.
   • 
   • 
   • 
5. 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() &gt;= $FirstRow and position() &lt;= $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 &gt; 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 &lt; $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 &gt; 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 &lt; $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(&quot;topPagingCell<xsl:value-of select="$WPQ" />&quot;);
      var bottomPagingCell = document.getElementById(&quot;bottomPagingCell<xsl:value-of select="$WPQ" />&quot;);
      if (topPagingCell != null &amp;&amp; bottomPagingCell != null)
      {
      topPagingCell.innerHTML = bottomPagingCell.innerHTML;
      }
    </script>
    </xsl:if>
  </xsl:template>
  </xsl:stylesheet>