Adding paging numbers to the control list with paging template

When you are using the Content Search Web Part, you have by default a control template list with paging available. Now this template only shows left and right buttons to navigate to the next or previous page:

These two buttons do not give you very much visual information about paging. For example: you do not know on which page you currently are and you can only go back one page at a time.

If you go to a SharePoint search center the paging works a bit differently compared to the CSWP template. In the default control template of the search result web part the same left and right paging buttons are included, but you also have page numbers which makes it easier to navigate.

Search result web part template with paging

As this is just some additional JavaScript it can be easily added to your own templates so that you can create a control template with paging numbers for the CSWP.

Solution

The code you need to add to get these paging numbers in your control template is the following:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!--#_
// Show the paging numbers
for (var i = 0; i < pagingInfo.length; i++) {
    var pi = pagingInfo[i];
    if(!$isNull(pi)) {
        if (pi.pageNumber !== -1 && pi.pageNumber !== -2) {
            var pageLinkId = "PageLink_" + pi.pageNumber;
            // Check if it is the current selected page
            if (pi.startItem === -1) {
_#-->
            <strong>_#= $htmlEncode(pi.pageNumber) =#_</strong>
<!--#_
            } else {
_#-->
            <a id="_#= $htmlEncode(pageLinkId) =#_" href="#" title="_#= $htmlEncode(pi.title) =#_" onclick="$getClientControl(this).page(_#= $htmlEncode(pi.startItem) =#_);return Srch.U.cancelEvent(event);">_#= $htmlEncode(pi.pageNumber) =#_</a>
<!--#_
            }
        }
    }
}
_#-->

The code loops over all the available pages. You need to be aware that there are two special numbers that you can retrieve which is:

“-1”: move to the previous page
“-2”: move to the next page
Show image
Special page numbers

These special numbers are used for the left and right buttons, so they do not need to be included in the paging numbers. That is why there is a check to see if the pageNumber is not equal to -1 or -2.

This code needs to be added in between the left and right buttons:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<li class="ms-promlink-header">
    <span class="ms-promlink-headerNav">
        <a class="ms-commandLink ms-promlink-button _#= $htmlEncode(previousPageContainerClassName) =#_" title="_#= $htmlEncode(firstPage.title) =#_" href="#" onclick='$getClientControl(this).page(_#= $htmlEncode(firstPage.startItem) =#_);return Srch.U.cancelEvent(event);'>
            <span class="ms-promlink-button-image">
                <img class="_#= $htmlEncode(previousPageImageClassName) =#_" alt="_#= $htmlEncode(firstPage.title) =#_" src="_#= $urlHtmlEncode(GetThemedImageUrl('spcommon.png')) =#_">
            </span>
        </a>

        <span class="ms-promlink-button-inner"></span>

<!--#_
// Show the paging numbers
for (var i = 0; i < pagingInfo.length; i++) {
    var pi = pagingInfo[i];
    if(!$isNull(pi)) {
        if (pi.pageNumber !== -1 && pi.pageNumber !== -2) {
            var pageLinkId = "PageLink_" + pi.pageNumber;
            // Check if it is the current selected page
            if (pi.startItem === -1) {
_#-->
            <strong>_#= $htmlEncode(pi.pageNumber) =#_</strong>
<!--#_
            } else {
_#-->
            <a id="_#= $htmlEncode(pageLinkId) =#_" href="#" title="_#= $htmlEncode(pi.title) =#_" onclick="$getClientControl(this).page(_#= $htmlEncode(pi.startItem) =#_);return Srch.U.cancelEvent(event);">_#= $htmlEncode(pi.pageNumber) =#_</a>
<!--#_
            }
        }
    }
}
_#-->

        <span class="ms-promlink-button-inner"></span>

        <a class="ms-commandLink ms-promlink-button _#= $htmlEncode(nextPageContainerClassName) =#_" title="_#= $htmlEncode(lastPage.title) =#_" href="#" onclick='$getClientControl(this).page(_#= $htmlEncode(lastPage.startItem) =#_);return Srch.U.cancelEvent(event);'>
            <span class="ms-promlink-button-image">
                <img class="_#= $htmlEncode(nextPageImageClassName) =#_" alt="_#= $htmlEncode(lastPage.title) =#_" src="_#= $urlHtmlEncode(GetThemedImageUrl('spcommon.png')) =#_">
            </span>
        </a>
    </span>
</li>

Result

This is the end result:

Download

The template I created for this post can be downloaded from GitHub at the following location: Paging control template with page numbers (CSWP).

Adding paging numbers to the control list with paging template

Solution

Result

Download

Report issues or make changes on GitHub

Related posts

Comments