Add a count button to WebDrawer
It is possible to speed up the search results in WebDrawer by switching to simpler page navigation. This post shows how to add a 'Get Count' button to allow users to determine the total number of search results.
Follow the steps in the video and use the code snippets below.
The Code
Views\Shared\searchResults.cshtml
<ul id="trim-pagination"> <li class="@(start < 2 ? "disabled" : null)"> @if (start > 1) { queryString["start"] = (start > pageSize ? start - pageSize : 0).ToString(); <a href="?@queryString.ToFormUrlEncoded()">«</a> } else { <span> «</span> } </li> <li> @{ var t = ((start - 1) / pageSize) + 1; } <span>@t</span> </li> <li class="@(!this.Model.HasMoreItems ? "disabled" : null)"> @if (this.Model.HasMoreItems) { start = (start == 0 ? start + 1 : start); queryString["start"] = (start + pageSize).ToString(); <a href="?@queryString.ToFormUrlEncoded()">»</a> } else { <span>»</span> } </li> <li> <button id="getCount" class="btn search-btn count-btn">Get Count </button> </li> </ul>
css\main.css
.count-btn { margin-left: 20px; margin-top:4px; } html.busy, html.busy * { cursor: wait !important; }
scripts\webdrawer.js
$("html").bind("ajaxStart", function () { $(this).addClass('busy'); }).bind("ajaxStop", function () { $(this).removeClass('busy'); }); $("#getCount").click(function () { var q = location.href; var my_url = location.href + "&format=json&ExcludeCount=true&CountResults=true"; $.get(my_url, function (response) { $("#getCount").text("Count: " + response.Count); }); });
Written on May 2, 2017