Adding Controls Inside a Pager

Read the associated Blog Post: Adding Controls Inside a Pager

This example demonstrates how to add custom controls to the header or footer of a view control.

Working Example
 
Previous12345678...Next
Put Additional Code or controls here....
 
Doc Title
Doc Author
Random Data
test    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
test    
ccc    
helo111    
test speed 123u    
Test1    
     
     
rainy day11    
Nosic    
     
Sexy Nerd Girls Rule! :)    
     
XPage Source Code for this Sample
For display purposes, extra spaces have been placed between ]] ${ and #{
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:panel styleClass="workingSample">
		<xp:viewPanel rows="30" id="viewPanel1"
			viewStyle="width:100%;">
			<xp:this.facets>
				<xp:div xp:key="headerPager">
					<xp:pager partialRefresh="true"
						layout="Previous Group Next" id="pager1" />
					Put Additional Code or controls here....
					<xp:button id="nadaButton"
						value="This Button Does Nothing!" />
				</xp:div>
			</xp:this.facets>
			<xp:this.data>
				<xp:dominoView var="view1"
					viewName="sample-data-view">
				</xp:dominoView>
			</xp:this.data>
			<xp:viewColumn columnName="docTitle" id="viewColumn1">
				<xp:viewColumnHeader value="Doc Title"
					id="viewColumnHeader1">
				</xp:viewColumnHeader>
			</xp:viewColumn>
			<xp:viewColumn columnName="docAuthor" id="viewColumn2">
				<xp:viewColumnHeader value="Doc Author"
					id="viewColumnHeader2">
				</xp:viewColumnHeader>
			</xp:viewColumn>
			<xp:viewColumn columnName="randomData" id="viewColumn3">
				<xp:viewColumnHeader value="Random Data"
					id="viewColumnHeader3">
				</xp:viewColumnHeader>
			</xp:viewColumn>
		</xp:viewPanel>
	</xp:panel>
</xp:view>
				
Client-Side JavaScript Code for this Sample
None
				
CSS for this Sample
None