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.

Pagination

 

 

 

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” :

if(ctx.ClientControl.get_showPaging()){
                    var pagingInfo = ctx.ClientControl.get_pagingInfo();
                    if(!$isEmptyArray(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”;
if(currentPage!=1)
{
     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) =#_” />
                  </span>
           </a>
      </li>

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){
      idPagingLink=”PagingSelf”;
   }
   _#–>
   <li id=”_#= $htmlEncode(idPagingLink) =#_”>
        <a id=”A2″ href=”#” title=”_#= $htmlEncode(j) =#_”
onclick=”$getClientControl(this).page(_#= $htmlEncode(indexElem) =#_);return Srch.U.cancelEvent(event);”>

                       _#= $htmlEncode(j) =#_
          </a>
     </li>
 <!–#_
 }

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”))) =#_
 </div>

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.

 

 

 

Advertisements

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

  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.

    Thanks

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s