Search Results Web Part Exact pagination

Introduction :

Hello everybody. I will talk again about the Search Results Web Part. But this time it will be about how results are displaying, and especially the pagination.

I think you all know that the pagination on standard control templates is approximative, and number of results is not exact.





As you see , first it shows only 2 pages and when we paginate the number of pages changes. Same thing for the number of results ,we see “About 8 results”.

Today we will “correct” this problem, and make an exact pagination, with the exact number of results.

Here we are going to change the way how Search Results shows the set of results, so we have to change the Control Template.

Solution :

Let’s start by downloading the Control Template “Default Results” and edit it.

The default Control Template(and all standard sharepoint control templates) uses the array “pagingInfo” :

                    var pagingInfo = ctx.ClientControl.get_pagingInfo();

That array changes when we paginate and does not give exact informations. So we have to calculate with ourselves the pagination informations.

What we need to do it? Well we need the number of element per page, and the number of found items:

var resultsPerPage = ctx.DataProvider.get_resultsPerPage();
var totalRows = ctx.DataProvider.get_totalRows();

Now we can get the exact number of pages and the exact results number template:

var nbPages = Math.round(totalRows / resultsPerPage);
var exactCount = Srch.Res.rs_ResultCount;

One last thing is missing : the current page number. We can not use a global variable, because the control template is re-executed every-time we paginate. We will use the pagingInfo array just to get the number of current page.

We have just to iterate over the pagingInfo array and search the item that has StartItem equal to -1:

var currentPage = 1;
for( var i=0;i < pagingInfo.length ; i++){
         if(pagingInfo[i].startItem == -1)
           currentPage = pagingInfo[i].pageNumber;

To have the same design as the standard pagination we will generate exactly the same HTML.

We start by generating the “previous” link :

var prevPage;
var iconClass = “ms-srch-pagingPrev”;
     prevPage = currentPage – 1;
    var indexElem = ((prevPage-1) * resultsPerPage) + 1;
     <li id=”PagingImageLink”>
         <a id=”PageLinkPrev” href=”#” class=”ms-commandLink ms-promlink-button ms-promlink-button-enabled ms-verticalAlignMiddle”
              title=”_#= $htmlEncode(prevPage) =#_” onclick=”$getClientControl(this).page(_#= $htmlEncode(indexElem) =#_);return Srch.U.cancelEvent(event);”>
                  <span class=”ms-promlink-button-image”>
                       <img src=”_#= $urlHtmlEncode(imagesUrl) =#_” class=”_#= $htmlEncode(iconClass) =#_” alt=”_#= $htmlEncode(prevPage) =#_” />

Now we iterate over number of pages and generate links :

for(var j=1; j <= nbPages; j++)
  var indexElem = ((j-1) * resultsPerPage) + 1;
  var idPagingLink=”PagingLink”;
  if(j == currentPage){
   <li id=”_#= $htmlEncode(idPagingLink) =#_”>
        <a id=”A2″ href=”#” title=”_#= $htmlEncode(j) =#_”
onclick=”$getClientControl(this).page(_#= $htmlEncode(indexElem) =#_);return Srch.U.cancelEvent(event);”>

                       _#= $htmlEncode(j) =#_

Now we generate the “next” link (so same thing as the previous link).

Finally we have to update the exact results number label :

<div id=”ResultCount” class=”ms-srch-resultscount”>
     _#= String.format($htmlEncode(exactCount ), $htmlEncode(totalRows.localeFormat(“N0”))) =#_

And now we can see the complete pagination with the exact number of elements :

Exact Pagination




I hope that my article will help you.

See you soon.




14 thoughts on “Search Results Web Part Exact pagination

  1. I tried to insert your html in my Display template but it failed, Have you really put this html in a display template and tested it , thank you

  2. I’ve injectd it correctly in my Default_Control , and removed the ones set by default,

    But my problem is that the display template shows only 2 pages on Load

      1. Thanks it is resolved.

        As eddnes says,display template shows only 2 pages on Load how to customise it to show consistent 3 page then again 3 page likewise


  3. Hi,
    exactcount always returns 0.
    I have First Prev 1…6 Next Last totalrows always returns different result the Last link not work. Any idea how to avoid it and get totalrows with trimduplicate.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.