Refresh paginations buttons instead of fully rendering each time.

This prevent the already displayed pagination buttons to be unresponsive
when clicking on them while the rendering JS function is running.
pull/127/merge
luccioman 7 years ago
parent c4a7ad2865
commit cbbc7b43d3

@ -42,64 +42,135 @@ function fadeOutBar() {
}
/**
* @param buttonsList the DOM list element containing the pagination buttons
* @param offset item number to start with
* @param itemsperpage count of items requested per page
* @param totalcount count of items available from YaCy node for this query
* @returns pagination buttons
* @param navurlbase the search url without pagination parameters
* @param localQuery when true the search query is limited to the YaCy peer local data
* @param jsResort when true results resorting with JavaScript is enabled
*/
function renderPaginationButtons(offset, itemsperpage, totalcount, navurlbase, localQuery, jsResort) {
var resnav = "<ul class=\"pagination\">";
function renderPaginationButtons(buttonsList, offset, itemsperpage, totalcount,
navurlbase, localQuery, jsResort) {
var buttons = buttonsList.getElementsByTagName("li");
if (buttons.length < 2) {
/* At least prev and next page buttons are expected to be here */
return;
}
var thispage = Math.floor(offset / itemsperpage);
var firstPage = thispage - (thispage % 10);
var prevPageElement = buttons[0];
var prevPageLink = prevPageElement.firstChild;
if (thispage == 0) {
resnav += "<li class=\"disabled\"><a title=\"Previous page\" href=\"#\">&laquo;</a></li>";
/* First page : the prev page button is disabled */
prevPageElement.className = "disabled";
if (prevPageLink != null) {
prevPageLink.accessKey = null;
prevPageLink.href = "#";
}
} else {
resnav += "<li><a id=\"prevpage\" title=\"Previous page\" accesskey=\"p\" href=\"";
if (jsResort) {
resnav += ("javascript:numberedPage(" + (thispage - 1) + ");");
} else {
resnav += (navurlbase + "&amp;startRecord=" + ((thispage - 1) * itemsperpage));
prevPageElement.className = "";
if (prevPageLink != null) {
prevPageLink.accessKey = "p";
if (jsResort) {
prevPageLink.href = "javascript:numberedPage(" + (thispage - 1)
+ ");";
} else {
prevPageLink.href = (navurlbase + "&startRecord=" + ((thispage - 1) * itemsperpage));
}
}
resnav += "\">&laquo;</a></li>";
}
var nextPageElement = buttons[buttons.length - 1];
var totalPagesNb = Math.floor(1 + ((totalcount - 1) / itemsperpage));
var numberofpages = Math.min(10, totalPagesNb - firstPage);
if (!numberofpages) numberofpages = 10;
for (i = firstPage; i < (firstPage + numberofpages); i++) {
if (i == thispage) {
resnav += "<li class=\"active\"><a href=\"#\">";
resnav += (i + 1);
resnav += "</a></li>";
} else {
resnav += "<li><a href=\"";
if (jsResort) {
resnav += ("javascript:numberedPage(" + (i) + ");");
} else {
resnav += (navurlbase + "&amp;startRecord=" + (i * itemsperpage));
}
resnav += "\">" + (i + 1) + "</a></li>";
}
if (!numberofpages) {
numberofpages = 10;
}
if(numberofpages > 1) {
buttonsList.className = "pagination";
} else {
/* Hide the pagination buttons when there is less than one page of results */
buttonsList.className = "pagination hidden";
}
var btnIndex = 1;
var btnElement, pageLink;
/* Update existing buttons or add new ones according to the new pagination */
for (var i = firstPage; i < (firstPage + numberofpages); i++) {
if (btnIndex < (buttons.length - 1)) {
btnElement = buttons[btnIndex];
pageLink = btnElement.firstChild;
} else {
btnElement = document.createElement("li");
btnElement.id = "pageBtn" + btnIndex;
pageLink = document.createElement("a");
btnElement.appendChild(pageLink);
}
if (pageLink != null) {
if (i == thispage) {
btnElement.className = "active";
pageLink.href = "#";
} else {
btnElement.className = "";
if (jsResort) {
pageLink.href = "javascript:numberedPage(" + (i) + ");";
} else {
pageLink.href = navurlbase + "&startRecord=" + (i * itemsperpage);
}
}
pageLink.innerText = (i + 1);
}
if (btnIndex >= (buttons.length - 1)) {
/*
* Insert the newly created button now that all its modifications
* are done
*/
buttonsList.insertBefore(btnElement, buttons[buttons.length - 1]);
}
btnIndex++;
}
if ((localQuery && thispage >= (totalPagesNb - 1)) || (!localQuery && thispage >= (numberofpages - 1))) {
resnav += "<li class=\"disabled\"><a href=\"#\" title=\"Next page\">&raquo;</a></li>";
/* Remove existing buttons now in excess */
while (btnIndex < (buttons.length - 1)) {
buttonsList.removeChild(buttons[buttons.length - 2]);
}
var nextPageLink = nextPageElement.firstChild;
if ((localQuery && thispage >= (totalPagesNb - 1))
|| (!localQuery && thispage >= (numberofpages - 1))) {
/* Last page on a local query, or last fetchable page in p2p mode : the next page button is disabled */
nextPageElement.className = "disabled";
if (nextPageLink != null) {
nextPageLink.accessKey = null;
nextPageLink.href = "#";
}
} else {
resnav += "<li><a id=\"nextpage\" title=\"Next page\" accesskey=\"n\" href=\"";
if (jsResort) {
resnav += ("javascript:numberedPage(" + (thispage + 1) + ");");
} else {
resnav += (navurlbase + "&amp;startRecord=" + ((thispage + 1) * itemsperpage));
}
resnav += "\">&raquo;</a>";
nextPageElement.className = "";
if (nextPageLink != null) {
nextPageLink.accessKey = "n";
if (jsResort) {
nextPageLink.href = "javascript:numberedPage(" + (thispage + 1)
+ ");";
} else {
nextPageLink.href = navurlbase + "&startRecord="
+ ((thispage + 1) * itemsperpage);
}
}
}
resnav += "</ul>";
return resnav;
}
/**
* Parses a string representing an integer value
* @param strIntValue formatted string
* @returns the number value or undefined when the string is undefined, or NaN when the string is not a number
*
* @param strIntValue
* formatted string
* @returns the number value or undefined when the string is undefined, or NaN
* when the string is not a number
*/
function parseFormattedInt(strIntValue) {
var inValue;
@ -187,9 +258,9 @@ function statistics(offset, itemscount, itemsperpage, totalcount, localIndexCoun
}
progresseBarElement.setAttribute('style',"width:" + percent + "%");
}
var resnavElement = document.getElementById("resNav");
if (resnavElement != null && !jsResort) {
resnavElement.innerHTML = renderPaginationButtons(offsetIntValue, itemsperpageIntValue, totalcountIntValue, navurlbase, localQuery, jsResort);
var buttonsList = document.getElementById("paginationButtons");
if (buttonsList != null && !jsResort) {
renderPaginationButtons(buttonsList, offsetIntValue, itemsperpageIntValue, totalcountIntValue, navurlbase, localQuery, jsResort);
}
}

@ -87,7 +87,10 @@ var displayPage = function(isPageChange, pageNumber) {
$("#offset").html(offset);
$("#itemscount").html(itemscount);
$("#resNav").html(renderPaginationButtons(offset, requestedResults, totalcount, null, theLocalQuery, true));
var buttonsList = document.getElementById("paginationButtons");
if(buttonsList != null) {
renderPaginationButtons(buttonsList, offset, requestedResults, totalcount, null, theLocalQuery, true);
}
//latestinfo();

@ -211,7 +211,13 @@ document.getElementById("Enter").innerHTML = "search again";
::
::
::
<span id="resNav" class="col-sm-12 col-md-12" style="display: inline;"></span>
<span id="resNav" class="col-sm-12 col-md-12" style="display: inline;">
<ul id="paginationButtons" class="pagination hidden">
<li id="prevpage" class="disabled"><a title="Previous page" href="#">&laquo;</a></li>
<li class="active"><a href="#">1</a></li>
<li id="nextpage" class="disabled"><a title="Next page" href="#">&raquo;</a></li>
</ul>
</span>
::
#(/num-results)#

Loading…
Cancel
Save