Twitter Bootstrap Pager Template

<xp:pager
				partialRefresh="true"
				xp:key="footerPager"
				id="pager1"
				for="viewPanel1"
				panelPosition="left"
				styleClass="bootstrapPager">
				<xp:pagerControl
					type="Previous"
					id="pagerControl1"
					styleClass="bootstrapPagerPrevious">
				<xp:this.value><![CDATA[«]]></xp:this.value></xp:pagerControl>
				<xp:pagerControl
					type="Group"
					id="pagerControl2"
					styleClass="bootstrapPagerMiddle">
				</xp:pagerControl>
				<xp:pagerControl
					type="Next"
					id="pagerControl3"
					styleClass="bootstrapPagerNext">
				<xp:this.value><![CDATA[»]]></xp:this.value></xp:pagerControl>
			</xp:pager>





Use this XSP code to add a Pager control that has a similar look and feel as the Twitter Bootstrap Pagination component. The following URL opens an example of Twitter Bootstrap's Pagination Component for reference:

http://getbootstrap.com/components/#disabled-and-active-states

To finalise this Pager control, reference the following Bootstrap Pager Stylesheet XSnippet, which works hand in hand with this Custom XPages Pager Control:

http://openntf.org/XSnippets.nsf/snippet.xsp?id=twitter-bootstrap-pager-template-stylesheet

See below video tutorial explaining these 2 XSnippets:

http://johnjardin.ukuvuma.co.za/2015/06/24/video-tutorial-bootstrap-style-your-xpages-pager-control/

XPages
John V Jardin
May 24, 2015 11:54 AM
Rating
243

All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.



1 comment(s)Login first to comment...
Patrick Kwintensson
(at 04:44 on 01.03.2016)
I notice the ... in the pager for views with long document list is not proper styled (read: not styled at all)