Improved: Browser Unresponsive when Loading Entity with Large Results

(OFBIZ-10716)

I came across a situation where an entity was taking too much of a time 
(browser asked me to either wait or kill) while loading/searching results in the 
Webtools application. The entity had close to 5M records, and I checked the 
server responded timely but the rendering of the screen was taking time.

When I explored the issue I came across a macro which renders the pagination on the screen, and it had a code block which was causing the screen rendering delay.

<#assign x=(listSize/viewSize)?ceiling>
  <#list 1..x as i>
    <#if i == (viewIndex+1)><option selected="selected" value="<#else><option value="</#if>${i-1}">${i}</option>
  </#list>

This code seems logical enough to me, and what I gather from this is that the 
list will render a select box with 250,000 options.

I like propose a change in this UI/UX from select box to an input text box so an 
user can navigate to any page, similar to a navigation input box in a PDF 
document reader application.

Thanks: Devanshu Vyas for the patch, Nicolas for discussion and Kumar Rahul for
testing

git-svn-id: https://svn.apache.org/repos/asf/ofbiz/ofbiz-framework/trunk@1856145 13f79535-47bb-0310-9956-ffa450edef68

themes/common-theme/template/macro/HtmlFormMacroLibrary.ftl

@@ -606,12 +606,11 @@ Parameter: delegatorName, String, optional - name of the delegator in context.
       <ul>
         <li class="${paginateFirstStyle}<#if viewIndex gt 0>"><a href="javascript:void(0)" onclick="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxFirstUrl}')<#else>submitPagination(this, '${firstUrl}')</#if>">${paginateFirstLabel}</a><#else>-disabled"><span>${paginateFirstLabel}</span></#if></li>
         <li class="${paginatePreviousStyle}<#if viewIndex gt 0>"><a href="javascript:void(0)" onclick="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxPreviousUrl}')<#else>submitPagination(this, '${previousUrl}')</#if>">${paginatePreviousLabel}</a><#else>-disabled"><span>${paginatePreviousLabel}</span></#if></li>
-        <#if listSize gt 0 && javaScriptEnabled><li class="nav-page-select">${pageLabel} <select name="page" size="1" onchange="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxSelectUrl}')<#else>submitPagination(this, '${selectUrl}'+this.value)</#if>"><#rt/>
-          <#local x=(listSize/viewSize)?ceiling>
-            <#list 1..x as i>
-              <#if i == (viewIndex+1)><option selected="selected" value="<#else><option value="</#if>${i-1}">${i}</option>
-            </#list>
-          </select></li>
+        <#if listSize gt 0 && javaScriptEnabled>
+          <li class="nav-page-select">
+            ${pageLabel}
+            <input type="text" placeholder="${viewIndex+1} of ${(listSize/viewSize)?ceiling}" size="15" onchange="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxSelectUrl}')<#else>submitPagination(this, '${selectUrl}'+(this.value-1))</#if>"/>
+          </li>
         </#if>
         <li class="${paginateNextStyle}<#if highIndex lt listSize>"><a href="javascript:void(0)" onclick="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxNextUrl}')<#else>submitPagination(this, '${nextUrl}')</#if>">${paginateNextLabel}</a><#else>-disabled"><span>${paginateNextLabel}</span></#if></li>
         <li class="${paginateLastStyle}<#if highIndex lt listSize>"><a href="javascript:void(0)" onclick="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxLastUrl}')<#else>submitPagination(this, '${lastUrl}')</#if>">${paginateLastLabel}</a><#else>-disabled"><span>${paginateLastLabel}</span></#if></li>

themes/common-theme/webapp/common/js/util/OfbizUtil.js

@@ -1314,7 +1314,7 @@ function submitPagination(obj, url) {
         form.submit();
         return false;
     } else {
-        if (obj.tagName == "SELECT") {
+        if (obj.tagName == "SELECT" || obj.tagName == "INPUT") {
             location.href = url;
             return false;
         } else {