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:
Default list with paging template
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:
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
Special page numbers
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:
Result
This is the end result:List with paging buttons and numbers
COpy the COde:
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>List with Paging Numbers</title>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string">This is a Control Display Template with Paging. It is used by default in Rollup Pages. It allows the user to page through items using the arrows that appear when there are more items to show.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106601</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#Content Web Parts;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://intranet/sites/SPSUK/_catalogs/masterpage/tests/Control_ListWithPagingNumbers.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<div id="Control_ListWithPaging">
<!--#_
if (!$isNull(ctx.ClientControl) && !$isNull(ctx.ClientControl.shouldRenderControl) && !ctx.ClientControl.shouldRenderControl()) {
return "";
}
ctx.ListDataJSONGroupsKey = "ResultTables";
var $noResults = Srch.ContentBySearch.getControlTemplateEncodedNoResultsMessage(ctx.ClientControl);
var isRollupPageInDisplayMode = Srch.ContentBySearch.isRollupPage(ctx.ClientControl) && !Srch.U.isPageInEditMode();
var noResultsClassName = isRollupPageInDisplayMode ? "ms-attractMode ms-uppercase ms-alignCenter" : "ms-srch-result-noResults";
var ListRenderRenderWrapper = function(itemRenderResult, inCtx, tpl) {
var iStr = [];
iStr.push('<li>');
iStr.push(itemRenderResult);
iStr.push('</li>');
return iStr.join('');
}
ctx['ItemRenderWrapper'] = ListRenderRenderWrapper;
_#-->
<ul class="cbs-List">
<!--#_
var showPaging = ctx.ClientControl.get_showPaging();
if(showPaging) {
var pagingInfo = ctx.ClientControl.get_pagingInfo();
if(!$isEmptyArray(pagingInfo)) {
var getPagingImageClassName = function(buttonClassNamePrefix, isNext, isEnabled) {
var className = buttonClassNamePrefix;
className += (isNext && !Srch.U.isRTL()) || (!isNext && Srch.U.isRTL()) ? "right" : "left";
if(!$isNull(isEnabled) && isEnabled == false) {
className += "-disabled";
}
return className;
}
var getPagingContainerClassName = function(buttonClassNamePrefix, isEnabled) {
var className = buttonClassNamePrefix;
className += isEnabled ? "enabled" : "disabled";
return className;
}
var firstPage = pagingInfo[0];
var lastPage = pagingInfo[pagingInfo.length - 1];
var hasNextPage = lastPage.pageNumber == -2;
var hasPreviousPage = firstPage.pageNumber == -1;
var buttonClassNamePrefix = "ms-promlink-button-";
var nextPageContainerClassName = getPagingContainerClassName(buttonClassNamePrefix, hasNextPage);
var previousPageContainerClassName = getPagingContainerClassName(buttonClassNamePrefix, hasPreviousPage);
var nextPageImageClassName = getPagingImageClassName(buttonClassNamePrefix, true, hasNextPage);
var previousPageImageClassName = getPagingImageClassName(buttonClassNamePrefix, false, hasPreviousPage);
_#-->
<li class="ms-promlink-header">
<span class="ms-promlink-headerNav">
<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);'>
<span class="ms-promlink-button-image">
<img class="_#= $htmlEncode(previousPageImageClassName) =#_" alt="_#= $htmlEncode(firstPage.title) =#_" src="_#= $urlHtmlEncode(GetThemedImageUrl('spcommon.png')) =#_">
</span>
</a>
<span class="ms-promlink-button-inner"></span>
<!--#_
// Show the paging numbers
for (var i = 0; i < pagingInfo.length; i++) {
var pi = pagingInfo[i];
if(!$isNull(pi)) {
if (pi.pageNumber !== -1 && pi.pageNumber !== -2) {
var pageLinkId = "PageLink_" + pi.pageNumber;
// Check if it is the current selected page
if (pi.startItem === -1) {
_#-->
<strong>_#= $htmlEncode(pi.pageNumber) =#_</strong>
<!--#_
} else {
_#-->
<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>
<!--#_
}
}
}
}
_#-->
<span class="ms-promlink-button-inner"></span>
<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);'>
<span class="ms-promlink-button-image">
<img class="_#= $htmlEncode(nextPageImageClassName) =#_" alt="_#= $htmlEncode(lastPage.title) =#_" src="_#= $urlHtmlEncode(GetThemedImageUrl('spcommon.png')) =#_">
</span>
</a>
</span>
</li>
<!--#_
}
}
_#-->
_#= ctx.RenderGroups(ctx) =#_
</ul>
<!--#_
if (ctx.ClientControl.get_shouldShowNoResultMessage()) {
_#-->
<div class="_#= noResultsClassName =#_">_#= $noResults =#_</div>
<!--#_
}
_#-->
</div>
</body>
</html>
No comments:
Post a Comment