Catching the Page Number of a Pager Being Clicked

Question

It is possible to add an onClientLoad eventHandler to a viewPanel:

https://xcellerant.net/2013/01/14/viewpanel_onclientload

Clicking a Pager results in the onClientLoad being fired.

Question: is it possible to catch the Page Number of the Pager being clicked?

Answer 1

Add an on click event to every page number within pager in XPage's onClientLoad CSJS code.
Use dojo.query to get all a-tags within pager:

    dojo.query('[id$=pagerWithClickEvents] a').forEach(function(entry) {
        entry.addEventListener("click", function() {
            alert(this.innerHTML);
        });
    });

This XPage is a working example:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:viewPanel
        rows="3"
        value="#{view1}"
        id="viewPanel1">
        <xp:this.facets>
            <xp:pager
                partialRefresh="true"
                layout="Previous Group Next"
                xp:key="headerPager"
                id="pagerWithClickEvents">
            </xp:pager>
        </xp:this.facets>
        <xp:this.data>
            <xp:dominoView
                var="view1"
                databaseName="names.nsf"
                viewName="People">
            </xp:dominoView>
        </xp:this.data>
        <xp:viewColumn
            columnName="$17"
            id="viewColumn1">
            <xp:viewColumnHeader
                value="Name"
                id="viewColumnHeader1">
            </xp:viewColumnHeader>
        </xp:viewColumn>
        <xp:viewColumn
            columnName="$16"
            id="viewColumn4">
            <xp:viewColumnHeader
                value="E-Mail"
                id="viewColumnHeader4">
            </xp:viewColumnHeader>
        </xp:viewColumn>
        <xp:eventHandler
            event="onClientLoad"
            submit="false">
            <xp:this.script><![CDATA[
            dojo.query('[id$=pagerWithClickEvents] a').forEach(function(entry) {
                entry.addEventListener("click", function() {
                    alert(this.innerHTML);
                });
            });
        ]]></xp:this.script>
        </xp:eventHandler>
    </xp:viewPanel>
</xp:view>