Adding paging numbers to the control list with paging template

This post is over a year old, some of this information may be out of date.

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

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 {{< caption-new “/uploads/2015/02/020615_1010_Addingpagin3.png” “Special page numbers” “data
/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAIAAADuA9qHAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAASUlEQVR4nAE+AMH/AN3p3tbl1t7o3tzc0drazuvl4fvl5frn6PLt7fj5+QDk7uTe6dzk8+vjwLngn5Xu4Nz67Oz67+/z9PP9/f1twzWK2GDIawAAAABJRU5ErkJggg==” “598” “93” >}}

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
<li class="ms-promlink-header">
2
    <span class="ms-promlink-headerNav">
3
        <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);'>
4
            <span class="ms-promlink-button-image">
5
                <img class="_#= $htmlEncode(previousPageImageClassName) =#_" alt="_#= $htmlEncode(firstPage.title) =#_" src="_#= $urlHtmlEncode(GetThemedImageUrl('spcommon.png')) =#_">
6
            </span>
7
        </a>
8

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

11
<!--#_
12
// Show the paging numbers
13
for (var i = 0; i < pagingInfo.length; i++) {
14
    var pi = pagingInfo[i];
15
    if(!$isNull(pi)) {
16
        if (pi.pageNumber !== -1 && pi.pageNumber !== -2) {
17
            var pageLinkId = "PageLink_" + pi.pageNumber;
18
            // Check if it is the current selected page
19
            if (pi.startItem === -1) {
20
_#-->
21
            <strong>_#= $htmlEncode(pi.pageNumber) =#_</strong>
22
<!--#_
23
            } else {
24
_#-->
25
            <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>
26
<!--#_
27
            }
28
        }
29
    }
30
}
31
_#-->
32

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

35
        <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);'>
36
            <span class="ms-promlink-button-image">
37
                <img class="_#= $htmlEncode(nextPageImageClassName) =#_" alt="_#= $htmlEncode(lastPage.title) =#_" src="_#= $urlHtmlEncode(GetThemedImageUrl('spcommon.png')) =#_">
38
            </span>
39
        </a>
40
    </span>
41
</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

Related articles

Creating Custom Refiner Control Display Templates for SharePoint 2013

Part 1: Create Your First Search Refiner Control Template

Part 2: Adding Refinement Actions to the Custom Search Refiner Control

Report issues or make changes on GitHub

Comments

Elio Struyf