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

Language

XPages

Tags

Author

Naveen Maurya

Submitted on

March 2, 2013 at 8:48 AM

Rating

Downloads

Notes

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.

IMPLEMENTATION:

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.

LIMITATIONS:

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.

<xp:scriptBlock>
	<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:
			evt.preventDefault();
			var previousLink = dojo.query("#" + pagerID + " .xspPagerNav.xspPrevious a")[0];
			if (previousLink != null) {
				previousLink.click();
			}
			break;
		case dojo.keys.RIGHT_ARROW:
			evt.preventDefault();
			var nextLink = dojo.query("#" + pagerID + " .xspPagerNav.xspNext a")[0];
			if (nextLink != null) {
				nextLink.click();
			}
			break;
		}
	}
);]]></xp:this.value>
</xp:scriptBlock>

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