如何对很多页面进行页面导航?对数页面导航 [英] How to do page navigation for many, many pages? Logarithmic page navigation
问题描述
(最初，该提示是作为一个技巧提示，其中包含我的答案.我现在将我的答案分为以下答案"部分).
(Initially this was posted as a how-to tip with my answer included in the question. I've now split my answer off into the "answers" section below).
更具体地说:
假设您要向用户显示一组记录，并分成固定大小的页面(例如Google搜索的结果).如果只有几个页面，则可以在结果的末尾显示一个页面导航区域，如下所示:
Suppose you're displaying a set of records to the user, broken up into fixed-size pages (like the results of a Google search, for example). If there are only a few pages, you can display a page navigation area at the end of the results that might look like this:
[<< ] [<] 1 2 3 4 5 6 7 8 9 10 11 12 13 [>] [>>]
[ << ] [<] 1 2 3 4 5 6 7 8 9 10 11 12 13 [ > ] [ >> ]
但是，如果结果的页数超过20或30页，这很快就会变得不合时宜.
But this quickly becomes unweildy if there are much more than 20 or 30 pages of results.
有时您会看到类似这样的内容:
Sometimes you'll see things like this:
[<< ] [<] ... 665 666 667 668 669 670671672673 673 ... [>] [>>]
[ << ] [<] ... 665 666 667 668 669 670 671 672 673 ... [ > ] [ >> ]
或者这个:
[<< ] [<] 1 2 3 ... 667668 669 670671 ... 845846847847 [>] [>>]
[ << ] [<] 1 2 3 ... 667 668 669 670 671 ... 845 846 847 [ > ] [ >> ]
，但是在两种情况下，导航到"..."部分中间的任何位置都将需要很多次mousclicks.有时会提供一个直接输入页码的输入框.否则(假设我们在这里谈论的是网页)，精明的用户很可能会查看该URL，以查看他们是否可以直接对其进行编辑.
but in both cases, navigating to anywhere in the middle of the "..." sections would take many, many mousclicks. Sometimes an input box for entering the page number directly is provided; otherwise (assuming we're talking about a webpage here) the savvy user is likely to look at the URL to see if they can edit it directly.
最好是具有一个分页显示，使用户只需单击几下鼠标即可访问任何页面，而无需拥有过多的链接.
What would be nice would be to have a pagination display that lets the user reach any page in only a few mouseclicks, without having ridiculously many links.
如何最好地实现?
推荐答案
这是我的解决方案-使用对数页面导航":
这可以通过根据与端点或当前页面的距离对数分配对数来实现.这是我的意思的示例:
Here's my solution - use "Logarithmic Page Navigation":
This can be achieved by having page numbers distributed logarithmically, according to distance from either the endpoints or the current page. Here's an example of what I mean:
1 2 3 4 5 6. 10. 20. 30. 40. 50 .. 100 .. 200. 210. 220. 230. 240. 250. 252253254254255256 257 258259260261262. 270. 280. 290. 300. 310..400..500..600..700..800..900..950 960年. 970. 980. 990. 995996997997998999 1000
1 2 3 4 5 6 . 10 . 20 . 30 . 40 . 50 .. 100 .. 200 . 210 . 220 . 230 . 240 . 250 . 252 253 254 255 256 257 258 259 260 261 262 . 270 . 280 . 290 . 300 . 310 .. 400 .. 500 .. 600 .. 700 .. 800 .. 900 .. 950 . 960 . 970 . 980 . 990 . 995 996 997 998 999 1000
请注意，间隙如何从1s扩展到10s，再到100s(依此类推). (我使用10的幂，但是原则上您可以使用其他方案-例如2的幂).
Notice how in the gaps, numbering goes from 1s, to 10s, to 100s (etc.). (I use powers of 10, but in principle you could use a different scheme - powers of 2, say).
我在2004年编写了一些实现此目的的代码，并想在这里分享它.有PHP和ASP版本，但是逻辑应该易于翻译成任何语言.请注意，底部的位(在两种情况下)仅显示一些示例.显然，格式需要进行自定义以匹配您的网页(或应用程序)，因此此处非常基本.更改paginationHTML中的LINKS_PER_STEP，以确定随着您从端点或当前页面移开，在步长增加之前显示了多少个数字.
I wrote some code that does this back in 2004, and thought I'd share it here. There are PHP and ASP versions, but the logic ought to be simple to translate into any language. Note that the bit at the bottom (in both cases) just displays some examples. Obviously the formatting will need customization to match your webpage (or application), so it's pretty basic here. Alter LINKS_PER_STEP in paginationHTML to determine how many numbers get displayed before the step size increases, as you move away from the endpoints or current page.
为获得更紧凑的输出，您还可以考虑更改代码，以使编号在端点周围不密集"(即仅在当前页面周围密集).
For a more compact output you could also consider altering the code so that the numbering is not "dense" around the endpoints (i.e. dense only around the current page).
代码如下:
<?
// Used by paginationHTML below...
function paginationLink($p, $page, $URL)
{
if ($p==$page) return '<b style="color:#C0C0C0">' . $p . '</b>';
return '<a href="' . $URL . $p . '">' . $p . '</a>';
}
// Used by paginationHTML below...
function paginationGap($p1, $p2)
{
$x = $p2-$p1;
if ($x==0) return '';
if ($x==1) return ' ';
if ($x<=10) return ' . ';
if ($x<=100) return ' .. ';
return ' ... ';
}
// URL requires the $page number be appended to it.
// e.g. it should end in '&page=' or something similar.
function paginationHTML($page, $lastPage, $URL)
{
$LINKS_PER_STEP = 5;
// Nav buttons
if ($page>1)
$result = '<form action="' . $URL . '1" method="POST" style="display:inline"><input type="submit" value=" |< "></form> ' .
'<form action="' . $URL . ($page-1) . '" method="POST" style="display:inline"><input type="submit" value=" < "></form>';
else $result = '<input type="button" value=" |< " disabled> <input type="button" value=" < " disabled>';
$result .= ' ' . $page . ' ';
if ($page<$lastPage)
$result .= '<form action="' . $URL . ($page+1) . '" method="POST" style="display:inline"><input type="submit" value=" > "></form> ' .
'<form action="' . $URL . $lastPage . '" method="POST" style="display:inline"><input type="submit" value=" >| "></form>';
else $result .= '<input type="button" value=" > " disabled> <input type="button" value=" >| " disabled>';
$result .= "<br>";
// Now calculate page links...
$lastp1 = 1;
$lastp2 = $page;
$p1 = 1;
$p2 = $page;
$c1 = $LINKS_PER_STEP+1;
$c2 = $LINKS_PER_STEP+1;
$s1 = '';
$s2 = '';
$step = 1;
while (true)
{
if ($c1>=$c2)
{
$s1 .= paginationGap($lastp1,$p1) . paginationLink($p1,$page,$URL);
$lastp1 = $p1;
$p1 += $step;
$c1--;
}
else
{
$s2 = paginationLink($p2,$page,$URL) . paginationGap($p2,$lastp2) . $s2;
$lastp2 = $p2;
$p2 -= $step;
$c2--;
}
if ($c2==0)
{
$step *= 10;
$p1 += $step-1; // Round UP to nearest multiple of $step
$p1 -= ($p1 % $step);
$p2 -= ($p2 % $step); // Round DOWN to nearest multiple of $step
$c1 = $LINKS_PER_STEP;
$c2 = $LINKS_PER_STEP;
}
if ($p1>$p2)
{
$result .= $s1 . paginationGap($lastp1,$lastp2) . $s2;
if (($lastp2>$page)||($page>=$lastPage)) return $result;
$lastp1 = $page;
$lastp2 = $lastPage;
$p1 = $page+1;
$p2 = $lastPage;
$c1 = $LINKS_PER_STEP;
$c2 = $LINKS_PER_STEP+1;
$s1 = '';
$s2 = '';
$step = 1;
}
}
}
?>
<br><br><br>
<?=paginationHTML(1,1,'?page=')?>
<br><br><br>
<?=paginationHTML(2,3,'?page=')?>
<br><br><br>
<?=paginationHTML(3,3,'?page=')?>
<br><br><br>
<?=paginationHTML(73,100,'?page=')?>
<br><br><br>
<?=paginationHTML(4,100,'?page=')?>
<br><br><br>
<?=paginationHTML(257,1000,'?page=')?>
<br><br><br>
<?=paginationHTML(7062,10555,'?page=')?>
<br><br><br>
<?=paginationHTML(22080,503456,'?page=')?>
ASP版本:
<%
' Used by paginationHTML below...
Function paginationLink(p, page, URL)
if p=page then
paginationLink = "<b style=""color:#C0C0C0"">" & p & "</b>"
else
paginationLink = "<a href=""" & URL & p & """>" & p & "</a>"
end if
End Function
' Used by paginationHTML below...
Function paginationGap(p1, p2)
Dim x
x = p2-p1
if x=0 then
paginationGap = ""
elseif x=1 then
paginationGap = " "
elseif x<=10 then
paginationGap = " . "
elseif x<=100 then
paginationGap = " .. "
else
paginationGap = " ... "
end if
End Function
' URL requires the page number be appended to it.
' e.g. it should end in "&page=" or something similar.
Function paginationHTML(page, lastPage, URL)
const LINKS_PER_STEP = 5
Dim p1, p2, c1, c2, s1, s2, lastp1, lastp2, step
' Nav buttons
if page>1 then
paginationHTML = "<form action=""" & URL & "1"" method=""POST"" style=""display:inline""><input type=""submit"" value="" |< ""></form> " & _
"<form action=""" & URL & (page-1) & """ method=""POST"" style=""display:inline""><input type=""submit"" value="" < ""></form>"
else
paginationHTML = "<input type=""button"" value="" |< "" disabled> <input type=""button"" value="" < "" disabled>"
end if
paginationHTML = paginationHTML & " " & page & " "
if page<lastPage then
paginationHTML = paginationHTML & "<form action=""" & URL & (page+1) & """ method=""POST"" style=""display:inline""><input type=""submit"" value="" > ""></form> " & _
"<form action=""" & URL & lastPage & """ method=""POST"" style=""display:inline""><input type=""submit"" value="" >| ""></form>"
else
paginationHTML = paginationHTML & "<input type=""button"" value="" > "" disabled> <input type=""button"" value="" >| "" disabled>"
end if
paginationHTML = paginationHTML & "<br>"
' Now calculate page links...
lastp1 = 1
lastp2 = page
p1 = 1
p2 = page
c1 = LINKS_PER_STEP+1
c2 = LINKS_PER_STEP+1
s1 = ""
s2 = ""
step = 1
do
if c1>=c2 then
s1 = s1 & paginationGap(lastp1, p1) & paginationLink(p1, page, URL)
lastp1 = p1
p1 = p1+step
c1 = c1-1
else
s2 = paginationLink(p2, page, URL) & paginationGap(p2, lastp2) & s2
lastp2 = p2
p2 = p2-step
c2 = c2-1
end if
if c2=0 then
step = step*10
p1 = p1+step-1 ' Round UP to nearest multiple of step
p1 = p1-(p1 mod step)
p2 = p2-(p2 mod step) ' Round DOWN to nearest multiple of step
c1 = LINKS_PER_STEP
c2 = LINKS_PER_STEP
end if
if p1>p2 then
paginationHTML = paginationHTML & s1 & paginationGap(lastp1, lastp2) & s2
if (lastp2>page) or (page>=lastPage) then exit do
lastp1 = page
lastp2 = lastPage
p1 = page+1
p2 = lastPage
c1 = LINKS_PER_STEP
c2 = LINKS_PER_STEP+1
s1 = ""
s2 = ""
step = 1
end if
loop
End Function
%>
<br><br><br>
<%=paginationHTML(1,1,"?page=")%>
<br><br><br>
<%=paginationHTML(2,3,"?page=")%>
<br><br><br>
<%=paginationHTML(3,3,"?page=")%>
<br><br><br>
<%=paginationHTML(73,100,"?page=")%>
<br><br><br>
<%=paginationHTML(4,100,"?page=")%>
<br><br><br>
<%=paginationHTML(257,1000,"?page=")%>
<br><br><br>
<%=paginationHTML(7062,10555,"?page=")%>
<br><br><br>
<%=paginationHTML(22080,503456,"?page=")%>
Javascript版本(在完整的测试页中):
<!doctype html>
<html>
<head>
<title>Logarithmic Pagination Demo</title>
<style>
body {background:#C0C0C0;font-family:Arial,Helvetica,sans-serif;font-size:16px;text-align:left}
div {margin:0;padding:0}
div#setupDiv {margin:40px;text-align:center}
table#datarows {border-collapse:collapse;margin:40px auto}
table#datarows th {padding:5px 10px;background:#80B0FF;color:#FFFFFF;border:2px solid #80B0FF;width:1000px;text-align:center}
table#datarows td {padding:2px 10px;background:#FFFFFF;color:#D0D0D0;border:2px solid #80B0FF;width:1000px;text-align:left;font-style:italic}
input.err {border:2px solid #FF0000;background-color:#FFF0F0}
form.pager {display:table;margin:0 auto;padding:20px;border:2px solid #E0E0E0;border-radius:10px;background-color:#D0D0D0;text-align:left;white-space:nowrap}
form#pager1 {margin-top:40px}
form#pager2 {margin-bottom:60px}
form.pager div {display:table-cell;vertical-align:middle;padding:0 20px;white-space:nowrap}
form.pager div + div {border-left:2px solid #E0E0E0}
form.pager div.plinks {padding:0;border:0 none;font-size:14px;line-height:24px;max-width:800px;white-space:normal}
form.pager div.plinks b {display:inline-block;vertical-align:bottom;font-size:24px;line-height:21px;height:24px;overflow:hidden;color:#808080}
form.pager div.plinks a {text-decoration:none;color:black}
form.pager div.plinks a:hover {color:#0000FF;font-weight:bold}
form.pager div.plinks + div {border:0 none}
</style>
<script>
var NumPages, RecsPerPage, els1, els2, plinks1, plinks2;
function setupClick()
{
var el, n, r;
el = document.getElementById("NumPages");
el.className = ((n = (el.value >>> 0)) ? "" : "err");
el = document.getElementById("RecsPerPage");
el.className = ((r = (el.value >>> 0)) ? "" : "err");
if (n&&r) { NumPages = n; RecsPerPage = r; setupServerPage(); }
}
// This function sets up what would normally be part of the server's HTML output.
function setupServerPage()
{
var totRecs = NumPages * RecsPerPage, tbdy = document.getElementById("datarows").tBodies[0], l = tbdy.rows.length;
document.getElementById("plength1").innerHTML = document.getElementById("plength2").innerHTML = totRecs + " record" + ((totRecs===1)?"":"s") + "<br>" + NumPages + " page" + ((NumPages===1)?"":"s");
els1["pcount"].value = els2["pcount"].value = NumPages;
while (l>RecsPerPage) tbdy.deleteRow(--l);
while (l<RecsPerPage) tbdy.insertRow(l++).insertCell(0).innerHTML = "Some data...";
pageNavigate(1);
}
// This would be handled by a return trip to the server, if not using AJAX.
function pageClick(e)
{
e = e||window.event;
var s = e.target||e.srcElement, n, p, el;
if (s.tagName==="A") { n = (p = s.href).lastIndexOf("=")+1; pageNavigate(p.substring(n) >>> 0); return false; }
else if ((s.tagName!=="INPUT")||(s.type!=="submit")) return;
if (!(n = s.name)) { p = ((el = this.elements["p"]).value >>> 0); if ((p<=0)||(p>NumPages)) { el.className = "err"; return false; }}
else if (n==="p1") p = 1;
else if (n==="pprev") p = (this.elements["pcurr"].value >>> 0)-1;
else if (n==="pnext") p = (this.elements["pcurr"].value >>> 0)+1;
else if (n==="plast") p = (this.elements["pcount"].value >>> 0);
pageNavigate(p);
return false;
}
// This would also be handled by a return trip to the server, or else data records could be retrieved via AJAX.
function pageNavigate(p)
{
els1["p"].className = els2["p"].className = els1["p"].value = els2["p"].value = "";
if (p<1) p = 1; else if (p>NumPages) p = NumPages;
els1["p1"].disabled = els2["p1"].disabled = els1["pprev"].disabled = els2["pprev"].disabled = (p===1);
els1["pnext"].disabled = els2["pnext"].disabled = els1["plast"].disabled = els2["plast"].disabled = (p===NumPages);
els1["pcurr"].value = els2["pcurr"].value = p;
// if the server is handling this, insert NON-logarithmic page links here (can be just first, current, and last page).
plinks1.innerHTML = plinks2.innerHTML = logarithmicPaginationLinks(NumPages,p,"?p=");
}
// This function produces the logarithmic pagination links.
function logarithmicPaginationLinks(lastPage,matchPage,linkURL)
{
function pageLink(p, page) { return ((p===page) ? "<b>"+p+"</b>" : '<a href="'+linkURL+p+'">'+p+"</a>"); }
function pageGap(x) { if (x===0) return ""; if (x===1) return " "; if (x<=10) return " . "; if (x<=100) return " .. "; return " ... "; }
var page = (matchPage ? matchPage : 1), LINKS_PER_STEP = 5, lastp1 = 1, lastp2 = page, p1 = 1, p2 = page, c1 = LINKS_PER_STEP+1, c2 = LINKS_PER_STEP+1, s1 = "", s2 = "", step = 1, linkHTML = "";
while (true)
{
if (c1>=c2)
{
s1 += pageGap(p1-lastp1) + pageLink(p1,matchPage);
lastp1 = p1;
p1 += step;
c1--;
}
else
{
s2 = pageLink(p2,matchPage) + pageGap(lastp2-p2) + s2;
lastp2 = p2;
p2 -= step;
c2--;
}
if (c2===0)
{
step *= 10;
p1 += step-1; // Round UP to nearest multiple of step
p1 -= (p1 % step);
p2 -= (p2 % step); // Round DOWN to nearest multiple of step
c1 = LINKS_PER_STEP;
c2 = LINKS_PER_STEP;
}
if (p1>p2)
{
linkHTML += s1 + pageGap(lastp2-lastp1) + s2;
if ((lastp2>page)||(page>=lastPage)) break;
lastp1 = page;
lastp2 = lastPage;
p1 = page+1;
p2 = lastPage;
c1 = LINKS_PER_STEP;
c2 = LINKS_PER_STEP+1;
s1 = '';
s2 = '';
step = 1;
}
}
return linkHTML;
}
window.onload = function()
{
els1 = document.getElementById("pager1").elements;
els2 = document.getElementById("pager2").elements;
plinks1 = document.getElementById("plinks1");
plinks2 = document.getElementById("plinks2")
document.getElementById("pager1").onclick = document.getElementById("pager2").onclick = pageClick;
(document.getElementById("setupDiv").lastChild.onclick = setupClick)();
}
</script>
</head>
<body>
<div id="setupDiv">Select number of pages: <input type="text" id="NumPages" value="100" size="7"> and records per page: <input type="text" id="RecsPerPage" value="20" size="7"> <input type="button" value=" Go "></div>
<hr>
<form id="pager1" class="pager" method="GET"><input type="hidden" name="pcount" value=""><input type="hidden" name="pcurr" value="1">
<div>Go to page: <input type="text" name="p" size="7"> <input type="submit" value=" Go "></div>
<div><input type="submit" name="p1" value=" |< " disabled> <input type="submit" name="pprev" value=" < " disabled></div>
<div id="plinks1" class="plinks"></div>
<div><input type="submit" name="pnext" value=" > "> <input type="submit" name="plast" value=" >| "></div>
<div id="plength1"></div>
</form>
<table id="datarows"><thead><tr><th>Column Heading...</th></tr></thead><tbody></tbody></table>
<form id="pager2" class="pager" method="GET"><input type="hidden" name="pcount" value=""><input type="hidden" name="pcurr" value="1">
<div>Go to page: <input type="text" name="p" size="7"> <input type="submit" value=" Go "></div>
<div><input type="submit" name="p1" value=" |< " disabled> <input type="submit" name="pprev" value=" < " disabled></div>
<div id="plinks2" class="plinks"></div>
<div><input type="submit" name="pnext" value=" > "> <input type="submit" name="plast" value=" >| "></div>
<div id="plength2"></div>
</form>
</body>
</html>
这篇关于如何对很多页面进行页面导航?对数页面导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
