Go previous and next in Pager control using left and right arrow keys

	<xp:this.value><![CDATA[var pagerID = "#{id:pager1}"; // <-- Enter the ID of the pager control here which would change based on left / right arrow keys

pagerID = pagerID.replace(/:/g, "\\3A");
dojo.connect(document.body, "onkeydown",
	function(evt) {
		switch (evt.keyCode) {
		case dojo.keys.LEFT_ARROW:
			var previousLink = dojo.query("#" + pagerID + " .xspPagerNav.xspPrevious a")[0];
			if (previousLink != null) {
		case dojo.keys.RIGHT_ARROW:
			var nextLink = dojo.query("#" + pagerID + " .xspPagerNav.xspNext a")[0];
			if (nextLink != null) {

This is a simple JavaScript code snippet that allows you to move to previous / next pages in a Pager control using left / right arrow keys respectively. So if you have your pager control bound to view control then you can move between pages using arrow keys.


Copy the the script block on to your XPage and set the pager ID (first line). That's it, you are done. I tested it on IE9, Chrome 25, Firefox 19 & Opera 12.


This snippet works only if the pager style is set to Sample 1, Sample 2 or Sample 3 as it class names to identify Previous & Next links which are only available in these three styles. For other styles you will have to modify the code.

Also I haven't been able to make this work with Pager control bound to a Dynamic View Panel (Extension Library). If you can make it work then do leave your suggestions in comments.

Naveen Maurya
March 2, 2013 8:48 AM

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.

No comments yetLogin first to comment...