Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<h2>Here's my solution - use "Logarithmic Page Navigation":</h2> <p>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:</p> <p>1 2 3 4 5 6 . 10 . 20 . 30 . 40 . 50 .. 100 .. 200 . 210 . 220 . 230 . 240 . 250 . 252 253 254 255 256 <strong>257</strong> 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 </p> <p>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).</p> <p>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 <code>LINKS_PER_STEP</code> in <code>paginationHTML</code> to determine how many numbers get displayed before the step size increases, as you move away from the endpoints or current page.</p> <p>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). </p> <p>Here's the code:</p> <h1>PHP version:</h1> <pre><code>&lt;? // Used by paginationHTML below... function paginationLink($p, $page, $URL) { if ($p==$page) return '&lt;b style="color:#C0C0C0"&gt;' . $p . '&lt;/b&gt;'; return '&lt;a href="' . $URL . $p . '"&gt;' . $p . '&lt;/a&gt;'; } // Used by paginationHTML below... function paginationGap($p1, $p2) { $x = $p2-$p1; if ($x==0) return ''; if ($x==1) return ' '; if ($x&lt;=10) return ' . '; if ($x&lt;=100) return ' .. '; return ' ... '; } // URL requires the $page number be appended to it. // e.g. it should end in '&amp;page=' or something similar. function paginationHTML($page, $lastPage, $URL) { $LINKS_PER_STEP = 5; // Nav buttons if ($page&gt;1) $result = '&lt;form action="' . $URL . '1" method="POST" style="display:inline"&gt;&lt;input type="submit" value="&amp;nbsp;|&amp;lt;&amp;nbsp;"&gt;&lt;/form&gt;&amp;nbsp;' . '&lt;form action="' . $URL . ($page-1) . '" method="POST" style="display:inline"&gt;&lt;input type="submit" value="&amp;nbsp;&amp;lt;&amp;nbsp;"&gt;&lt;/form&gt;'; else $result = '&lt;input type="button" value="&amp;nbsp;|&amp;lt;&amp;nbsp;" disabled&gt;&amp;nbsp;&lt;input type="button" value="&amp;nbsp;&amp;lt;&amp;nbsp;" disabled&gt;'; $result .= '&amp;nbsp;&amp;nbsp;' . $page . '&amp;nbsp;&amp;nbsp;'; if ($page&lt;$lastPage) $result .= '&lt;form action="' . $URL . ($page+1) . '" method="POST" style="display:inline"&gt;&lt;input type="submit" value="&amp;nbsp;&amp;gt;&amp;nbsp;"&gt;&lt;/form&gt;&amp;nbsp;' . '&lt;form action="' . $URL . $lastPage . '" method="POST" style="display:inline"&gt;&lt;input type="submit" value="&amp;nbsp;&amp;gt;|&amp;nbsp;"&gt;&lt;/form&gt;'; else $result .= '&lt;input type="button" value="&amp;nbsp;&amp;gt;&amp;nbsp;" disabled&gt;&amp;nbsp;&lt;input type="button" value="&amp;nbsp;&amp;gt;|&amp;nbsp;" disabled&gt;'; $result .= "&lt;br&gt;"; // 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&gt;=$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&gt;$p2) { $result .= $s1 . paginationGap($lastp1,$lastp2) . $s2; if (($lastp2&gt;$page)||($page&gt;=$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; } } } ?&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;?=paginationHTML(1,1,'?page=')?&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;?=paginationHTML(2,3,'?page=')?&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;?=paginationHTML(3,3,'?page=')?&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;?=paginationHTML(73,100,'?page=')?&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;?=paginationHTML(4,100,'?page=')?&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;?=paginationHTML(257,1000,'?page=')?&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;?=paginationHTML(7062,10555,'?page=')?&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;?=paginationHTML(22080,503456,'?page=')?&gt; </code></pre> <h1>ASP version:</h1> <pre><code>&lt;% ' Used by paginationHTML below... Function paginationLink(p, page, URL) if p=page then paginationLink = "&lt;b style=""color:#C0C0C0""&gt;" &amp; p &amp; "&lt;/b&gt;" else paginationLink = "&lt;a href=""" &amp; URL &amp; p &amp; """&gt;" &amp; p &amp; "&lt;/a&gt;" 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&lt;=10 then paginationGap = " . " elseif x&lt;=100 then paginationGap = " .. " else paginationGap = " ... " end if End Function ' URL requires the page number be appended to it. ' e.g. it should end in "&amp;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&gt;1 then paginationHTML = "&lt;form action=""" &amp; URL &amp; "1"" method=""POST"" style=""display:inline""&gt;&lt;input type=""submit"" value=""&amp;nbsp;|&amp;lt;&amp;nbsp;""&gt;&lt;/form&gt;&amp;nbsp;" &amp; _ "&lt;form action=""" &amp; URL &amp; (page-1) &amp; """ method=""POST"" style=""display:inline""&gt;&lt;input type=""submit"" value=""&amp;nbsp;&amp;lt;&amp;nbsp;""&gt;&lt;/form&gt;" else paginationHTML = "&lt;input type=""button"" value=""&amp;nbsp;|&amp;lt;&amp;nbsp;"" disabled&gt;&amp;nbsp;&lt;input type=""button"" value=""&amp;nbsp;&amp;lt;&amp;nbsp;"" disabled&gt;" end if paginationHTML = paginationHTML &amp; "&amp;nbsp;&amp;nbsp;" &amp; page &amp; "&amp;nbsp;&amp;nbsp;" if page&lt;lastPage then paginationHTML = paginationHTML &amp; "&lt;form action=""" &amp; URL &amp; (page+1) &amp; """ method=""POST"" style=""display:inline""&gt;&lt;input type=""submit"" value=""&amp;nbsp;&amp;gt;&amp;nbsp;""&gt;&lt;/form&gt;&amp;nbsp;" &amp; _ "&lt;form action=""" &amp; URL &amp; lastPage &amp; """ method=""POST"" style=""display:inline""&gt;&lt;input type=""submit"" value=""&amp;nbsp;&amp;gt;|&amp;nbsp;""&gt;&lt;/form&gt;" else paginationHTML = paginationHTML &amp; "&lt;input type=""button"" value=""&amp;nbsp;&amp;gt;&amp;nbsp;"" disabled&gt;&amp;nbsp;&lt;input type=""button"" value=""&amp;nbsp;&amp;gt;|&amp;nbsp;"" disabled&gt;" end if paginationHTML = paginationHTML &amp; "&lt;br&gt;" ' 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&gt;=c2 then s1 = s1 &amp; paginationGap(lastp1, p1) &amp; paginationLink(p1, page, URL) lastp1 = p1 p1 = p1+step c1 = c1-1 else s2 = paginationLink(p2, page, URL) &amp; paginationGap(p2, lastp2) &amp; 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&gt;p2 then paginationHTML = paginationHTML &amp; s1 &amp; paginationGap(lastp1, lastp2) &amp; s2 if (lastp2&gt;page) or (page&gt;=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 %&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;%=paginationHTML(1,1,"?page=")%&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;%=paginationHTML(2,3,"?page=")%&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;%=paginationHTML(3,3,"?page=")%&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;%=paginationHTML(73,100,"?page=")%&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;%=paginationHTML(4,100,"?page=")%&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;%=paginationHTML(257,1000,"?page=")%&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;%=paginationHTML(7062,10555,"?page=")%&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;%=paginationHTML(22080,503456,"?page=")%&gt; </code></pre> <h1>Javascript version (within complete test page):</h1> <pre><code>&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Logarithmic Pagination Demo&lt;/title&gt; &lt;style&gt; 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} &lt;/style&gt; &lt;script&gt; var NumPages, RecsPerPage, els1, els2, plinks1, plinks2; function setupClick() { var el, n, r; el = document.getElementById("NumPages"); el.className = ((n = (el.value &gt;&gt;&gt; 0)) ? "" : "err"); el = document.getElementById("RecsPerPage"); el.className = ((r = (el.value &gt;&gt;&gt; 0)) ? "" : "err"); if (n&amp;&amp;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") + "&lt;br&gt;" + NumPages + " page" + ((NumPages===1)?"":"s"); els1["pcount"].value = els2["pcount"].value = NumPages; while (l&gt;RecsPerPage) tbdy.deleteRow(--l); while (l&lt;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) &gt;&gt;&gt; 0); return false; } else if ((s.tagName!=="INPUT")||(s.type!=="submit")) return; if (!(n = s.name)) { p = ((el = this.elements["p"]).value &gt;&gt;&gt; 0); if ((p&lt;=0)||(p&gt;NumPages)) { el.className = "err"; return false; }} else if (n==="p1") p = 1; else if (n==="pprev") p = (this.elements["pcurr"].value &gt;&gt;&gt; 0)-1; else if (n==="pnext") p = (this.elements["pcurr"].value &gt;&gt;&gt; 0)+1; else if (n==="plast") p = (this.elements["pcount"].value &gt;&gt;&gt; 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&lt;1) p = 1; else if (p&gt;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) ? "&lt;b&gt;"+p+"&lt;/b&gt;" : '&lt;a href="'+linkURL+p+'"&gt;'+p+"&lt;/a&gt;"); } function pageGap(x) { if (x===0) return ""; if (x===1) return " "; if (x&lt;=10) return " . "; if (x&lt;=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&gt;=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&gt;p2) { linkHTML += s1 + pageGap(lastp2-lastp1) + s2; if ((lastp2&gt;page)||(page&gt;=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)(); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="setupDiv"&gt;Select number of pages: &lt;input type="text" id="NumPages" value="100" size="7"&gt; &amp;nbsp; &amp;nbsp; and records per page: &lt;input type="text" id="RecsPerPage" value="20" size="7"&gt; &amp;nbsp; &amp;nbsp; &lt;input type="button" value=" Go "&gt;&lt;/div&gt; &lt;hr&gt; &lt;form id="pager1" class="pager" method="GET"&gt;&lt;input type="hidden" name="pcount" value=""&gt;&lt;input type="hidden" name="pcurr" value="1"&gt; &lt;div&gt;Go to page: &lt;input type="text" name="p" size="7"&gt; &lt;input type="submit" value=" Go "&gt;&lt;/div&gt; &lt;div&gt;&lt;input type="submit" name="p1" value=" |&lt; " disabled&gt; &lt;input type="submit" name="pprev" value=" &lt; " disabled&gt;&lt;/div&gt; &lt;div id="plinks1" class="plinks"&gt;&lt;/div&gt; &lt;div&gt;&lt;input type="submit" name="pnext" value=" &gt; "&gt; &lt;input type="submit" name="plast" value=" &gt;| "&gt;&lt;/div&gt; &lt;div id="plength1"&gt;&lt;/div&gt; &lt;/form&gt; &lt;table id="datarows"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Column Heading...&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;/tbody&gt;&lt;/table&gt; &lt;form id="pager2" class="pager" method="GET"&gt;&lt;input type="hidden" name="pcount" value=""&gt;&lt;input type="hidden" name="pcurr" value="1"&gt; &lt;div&gt;Go to page: &lt;input type="text" name="p" size="7"&gt; &lt;input type="submit" value=" Go "&gt;&lt;/div&gt; &lt;div&gt;&lt;input type="submit" name="p1" value=" |&lt; " disabled&gt; &lt;input type="submit" name="pprev" value=" &lt; " disabled&gt;&lt;/div&gt; &lt;div id="plinks2" class="plinks"&gt;&lt;/div&gt; &lt;div&gt;&lt;input type="submit" name="pnext" value=" &gt; "&gt; &lt;input type="submit" name="plast" value=" &gt;| "&gt;&lt;/div&gt; &lt;div id="plength2"&gt;&lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload