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

Search Results Web Part Sorting not working

Introduction :

Hello everybody. Today i got another problem with the Search Results Web Part.

I wanted to sort results. I went on “Sorting” tab and choose to sort by one of my own properties.

Sorting Search Results Web Part

 

 

 

 

 

When i test the query with the simulator it is working fine. But when i apply modifications and went back to the page i see results sorted on creation date!

Problem :

After spending hours searching on Internet, i found many blogs talking about the same issue. It seems that it is a bug with the Search Results Web Part.

The only solution that they suggest is to create a new result source and make sorting on it.

I did not like that solution so i decided to inspect again the xml of the Web Part.

Solution :

I found the property “AvailableSortsJson”Available Sort JSON

 

As its name indicates, this property specifies the available sorts. I put my property on first rank :

[{“name”:”Display Name of your sort”,”sorts”:[{“p”:”Name of property”,”d”:1 for descending/0 for ascending}]}]

And now everything is working fine.

 

Search Results Web Part Missing results

Introduction :

Hello everybody. Today i got a problem with the Search Results Web Part.

I added the Web Part manually, and configured it. and when i finished i exported it and add it to a module.

But when i activate my module , i do not see all expected results.

I spent 2 hours on trying to understand. First i thought it is caused by my custom template.

Solution :

I started reading all the xml of the Web Part, until finding “TrimDuplicates” on the DataProviderJson.

I said maybe SharePoint considers some of my results as duplicated. I set that property to false and i could see all of expected results.

Voilà.