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.