DataZoom
Page List Items
 Send Feedback
Samples > Page List Items

Glossary Item Box

Learn how to page list items using a CAML query and the ListItemPosition property. The list items are displayed in a SharePoint style table inside the web part. This example also shows how to create a simple filter, pass the filer to another web part where a CAML query is used to query and page items.

Prerequisites

This example requires a SharePoint list named 'Orders' to exist in the current site. The 'Orders' list must have two fields: Title and State. In this example the State field is a single line text value limited to 2 characters.

 

 

Syntax

Filter Orders By State Copy Code
## Get the orders list
#set( $list = $web.lists.get_item("Orders") )    

## Get the distinct states
#set( $states = $SPUtility.GetDistinctFieldValues($list, "State") )

## Get the selected state from the query string
#set( $selectedState = $queryString.get_item("State") )

## Get the current URL
#set( $url = $serverVariables.get_item("URL") )

<br>
Filter orders by selecting a state below...
<br><br>
<select id="stateFilter" name="stateFilter" onchange="window.location = this.value;">
<option value="$url">Choose a State...</option>
#foreach($state in $states)
          #each
<option value="$url?state=${state}" #if($selectedState == $state) selected #end>${state}</option>
          #nodata
       <option value="$url">No states found</options>
   #end
</select>

 

Orders By State Copy Code
## Get the selected state
#set( $selectedState = $queryString.get_item("state") )
#set( $pagingInfo = $form.get_item("pagingInfo") )

## Get paging attributes
#set( $pageIndex = $Strings.ConvertToInt($form.get_item("pageIndex"), 0) )
#set( $pageSize = $Strings.ConvertToInt($form.get_item("pageSize"), 2) )
#set( $pageIndexNext = $pageIndex + 1 )
#set( $pageIndexPrev = $pageIndex - 1 )
#set( $pageNumberNext = $pageIndexNext + 1 )

## View fields
#set( $viewFields = "<FieldRef Name='Title' />" )
#set( $viewFields = "$!{viewFields}<FieldRef Name='State' />" )

## Build a CAML query
#set( $caml = "<Where><Eq><FieldRef Name='State' /><Value Type='Text'>${selectedState}</Value></Eq></Where>" )
#set( $caml = "$!{caml}<OrderBy><FieldRef Name='Title' Ascending='True' /></OrderBy>" )
#set( $query = $SPUtility.CreateSPQuery($caml, $pageSize, $pagingInfo, $viewFields, "", false, false, false, false, false, false, false, false) )

## Get the Orders list items and issue the CAML query
#set( $list = $web.lists.get_item("Orders") )
#set( $listItems = $list.GetItems($query) )

## Get item numbers in the view
#set( $itemNumberFirst = $pageIndex * $pageSize + 1 )
#set( $itemNumberLast = $itemNumberFirst + $listItems.Count - 1 )

## Javascript methods
<script>
<!--
function setPageSize()
{
document.getElementById("pageIndex").value = 0;
document.getElementById("pagingInfo").value = "";
theForm.submit();
}
function gotoPageIndex(pageIndex)
{
// Set the page index
document.getElementById("pageIndex").value = pageIndex;

// Set the paging info
document.getElementById("pagingInfo").value =
document.getElementById("pagingInfo" + pageIndex).value;
// Submit the form
theForm.submit();
}
-->
</script>

## Hidden variables to track paging
#if( $pageIndex > 0 )
 #foreach($index in [0..$pageIndex])
   #set( $inputName = "pagingInfo${index}" )
   <input type="hidden" name="${inputName}" value="$form.get_item($inputName)" />
 #end
#end
<input type="hidden" name="pagingInfo${pageIndexNext}" value="${listItems.ListItemCollectionPosition.PagingInfo}" />
<input type="hidden" name="pagingInfo" value="" />
<input type="hidden" name="pageIndex" value="$!{pageIndex}" />

## Toolbar
<table class="ms-menutoolbar" cellpadding="5" cellspacing="0" border="0" width="100%" >
 <tr>
   <td class="ms-toolbar"></td>
   <td width="99%" class="ms-toolbar" nowrap>
     <IMG SRC="/_layouts/images/blank.gif" width=1 height=18 alt="">
   </td>
   <td class="ms-toolbar" nowrap="true">
     <table cellpadding="0" cellspacing="0" border="0">
       <tr>
         #if( $pageIndex > 0 )
           <td>
           <img src="/_layouts/images/prev.gif" border="0" alt="Previous Page ($pageIndex)" onclick="gotoPageIndex($pageIndexPrev);" style="cursor:pointer" />
           </td>
         #end
         <td class="ms-listheaderlabel" nowrap>
         ${itemNumberFirst}-${itemNumberLast}
         </td>
         #if( !$Strings.IsNullOrEmpty($listItems.ListItemCollectionPosition.PagingInfo) )
           <td>
           <img src="/_layouts/1033/images/next.gif" border="0" alt="Next Page ($pageNumberNext)" onclick="gotoPageIndex($pageIndexNext);" style="cursor:pointer" />
           </td>
         #end
       </tr>
     </table>
   </td>
   <td class=ms-separator>|</td>
   <td class="ms-toolbar" nowrap="true">Show &nbsp;&nbsp;</td>
   <td class="ms-toolbar" nowrap="true">
     <select name="pageSize" onchange="setPageSize();">
       <option value="2" #if($pageSize == 2) selected #end>2</option>
       <option value="5" #if($pageSize == 5) selected #end>5</option>
       <option value="10"#if($pageSize == 10) selected #end>10</option>
       <option value="15"#if($pageSize == 15) selected #end>15</option>
       <option value="50"#if($pageSize == 50) selected #end>50</option>
       <option value="100"#if($pageSize == 100) selected #end>100</option>
     </select>
   </td>
   <td>&nbsp;&nbsp;&nbsp;</td>
 </tr>
</table>

## Get edit url information
#set( $sourceUrlEncoded = $HttpUtility.UrlEncode($request.RawUrl) )
#set( $editForm = $list.Forms.get_item($PAGETYPE_PAGE_EDITFORM) )

## Display the list items   
#foreach($item in $listItems)
#beforeall
  <table class="ms-listviewtable" cellpadding="3" cellspacing="0" border="0" width="100%">
    <tr class="ms-viewheadertr">
      <th class="ms-vh2-nofilter">Title</th>
      <th class="ms-vh2-nofilter">State</th>
    </tr>
#odd
    <tr class="">
#even
    <tr class="ms-alternating">
#each
      <td class="ms-vb2"><a href="$web.Url/$editForm.Url?ID=$item.ID&Source=$sourceUrlEncoded">$item.Title</a></td>
      <td class="ms-vb2">$item.get_item("State")</td>
#after
    </tr>
#afterall
  </table>
#nodata
  <div style="width:500px">
  #if( $Strings.IsNullOrEmpty($selectedState) )
   Please select a state.
  #else
No orders found for the '${selectedState}' state.
  #end
  </div>
#end

 

Output

The output consists of two web parts: Filter Orders By State, Orders By State. The output will limit orders by the selected state, allow the page size to be selected and allow the user to page through the results by clicking the paging arrows located in the tool bar.

 

©2010 SharePoint Solutions. All Rights Reserved.