Tags

,

DataFormWebPart is simple to be customized if you edit it with SharePoint Designer from design view. But on 2013 version, design view was removed. So it is time to learn how to customize the webpart from the code. And one of the things a developer might be required to do is to create a pagination.

Now, let’s start creating the skeleton of the dataformwebpart.

<WebPartPages:DataFormWebPart runat="server" IsIncluded="True" FrameType="None" NoDefaultStyle="TRUE" ViewFlag="0" Title="" __markuptype="vsattributemarkup" __WebPartId="{1B724E2D-207A-4F03-A851-7DA57139C01B}" id="PMView" showwithsampledata="true" __AllowXSLTEditing="true" WebPart="true" Height="" Width="">
<DataSources>
</DataSources>
<ParameterBindings>
</ParameterBindings>
<XSL>
</XSL>
</WebPartPages:DataFormWebPart>

So we have all the sections for the webpart. Now we will add information to each section.

Add the datasource

<SharePoint:SPDataSource runat="server" DataSourceMode="List" SelectCommand="&lt;View&gt;&lt;/View&gt;" UseInternalName="True" ID="MyDataSource"><SelectParameters>
<WebPartPages:DataFormParameter ParameterKey="dvt_sortfield" PropertyName="ParameterValues" Name="dvt_sortfield" DefaultValue="ID" /><WebPartPages:DataFormParameter ParameterKey="dvt_sortdir" PropertyName="ParameterValues" Name="dvt_sortdir" DefaultValue="FALSE" />
<asp:parameter DefaultValue="MyList" Name="ListName" />
<asp:parameter DefaultValue="0" Name="StartRowIndex" />
<asp:parameter DefaultValue="" Name="nextpagedata" />
<asp:parameter DefaultValue="30" Name="MaximumRows" />
</SelectParameters>
</SharePoint:SPDataSource>

You can notice some select parameters:

– ListName – representing the name of the list you want to display;
– StartRowIndex – starting row from where select statement begins;
– nextpagedata – data for the next page, if exists (if not is empty);
– MaximumRows – numbers of rows per page.

Add ParameterBindings section

<ParameterBinding Name="dvt_firstrow" Location="QueryString(FirstRow)" DefaultValue="1"/>
<ParameterBinding Name="dvt_nextpagedata" Location="Postback;Connection"/>
<ParameterBinding Name="dvt_startposition" Location="QueryString(Start)" DefaultValue=""/>
<ParameterBinding Name="Qs" Location="ServerVariable(QUERY_STRING)" DefaultValue=""/>
<ParameterBinding Name="CurrentPageUrl" Location="ServerVariable(URL)" DefaultValue=""/>

Add XSLT code

<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">
	
<xsl:output method="html" indent="no"/>
<xsl:decimal-format NaN=""/>
<xsl:param name="dvt_sortfield" />
<xsl:param name="dvt_sortdir" />
<xsl:param name="PageSize">30</xsl:param>
<xsl:param name="dvt_firstrow" />
<xsl:param name="dvt_nextpagedata" />	
<xsl:param name="dvt_startposition" />
<xsl:param name="Qs" />
<xsl:param name="CurrentPageUrl" />
<xsl:param name="FullPath">
	<xsl:choose>
	<xsl:when test="$Qs = ''"><xsl:value-of select="$CurrentPageUrl" disable-output-escaping="yes" /></xsl:when>
	<xsl:otherwise><xsl:value-of select="concat($CurrentPageUrl,'?',$Qs)" disable-output-escaping="yes" /></xsl:otherwise>
	</xsl:choose>
</xsl:param>

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

<table>
<thead>
	<tr>
	<th>ID</th>
	<th>Title</th>
	</tr>
</thead>
<tbody>
      <xsl:for-each select="/dsQueryResponse/Rows/Row">
	<tr>
	<td><xsl:value-of select="@ID" /></td>
	<td><xsl:value-of select="@Title" /></td>
	</tr>
      </xsl:for-each>
</tbody>
<tfoot>
<tr>
<td colspan="2">

<!-- Start of Pagination -->
	<xsl:if test="$dvt_nextpagedata != '' or $dvt_firstrow &gt; 1">
<table cellpadding="0" cellspacing="0" border="0">
	<tr>
	<td style="padding:2px 2px 2px 2px;">
	<!-- Previous Page Link -->
	<xsl:if test="$dvt_firstrow &gt; 1">
	<!-- Calculate data for previous page -->
	<xsl:variable name="PreviousID" select="/dsQueryResponse/Rows/Row/@ID[position() = 1]" />
	<xsl:variable name="PreviousPos" select="$dvt_firstrow - $PageSize" />
	<xsl:variable name="PreviousPageData" select="concat('Paged=TRUE&amp;PagedPrev=TRUE&amp;p_ID=',$PreviousID)" />
	<img src="/_layouts/1033/images/prev.gif" alt="Previous page" style="border:0;cursor:pointer;" onclick="javascript:Paginate('{$PreviousPos}','{$PreviousPageData}');" />
	</xsl:if>
	</td>
	<td style="padding:2px 2px 2px 2px; font-family:Arial, Helvetica, sans-serif; font-size:12px; vertical-align:middle;">
	<xsl:value-of select="$dvt_firstrow" disable-output-escaping="yes" /> - <xsl:value-of select="$dvt_firstrow + $PageSize - 1" />
	</td>
	<td style="padding:2px 2px 2px 2px;">
	<!-- Link to next page -->
	<xsl:if test="$dvt_nextpagedata != ''">
	<xsl:variable name="NextPos" select="$dvt_firstrow + $PageSize" />
	<img src="/_layouts/1033/images/next.gif" alt="Next" style="border:0;cursor:pointer;" onclick="javascript:Paginate('{$NextPos}','{$dvt_nextpagedata}');"  />
	</xsl:if>
	</td>
	</tr>
</table>
</xsl:if>
<!-- End of Pagination -->

</td>
</tr>
</tfoot>
</table>
</xsl:template>

</xsl:stylesheet>

Add JavaScript for going to next or previous page

function Paginate(firstrow,start) {

        JSRequest.EnsureSetup() ;
	var FilePath = JSRequest.PathName;
	window.top.location.href = FilePath + '?&FirstRow=' + escapeProperly(firstrow) + '&Start=' + escapeProperly(start);
 }

Please not that JSRequest and escapeProperly are included in SharePoint client code.

If you complete each section as I described, you will have an working pagination which is set from querystrings parameters.

Advertisements