blocks|key|88127|text|我认为分页的一个很好的替代方法是让用户告诉服务器他们正在寻找的是什么，或者不止一种方式。当然，对于某些类型的内容(比如，大量的文本，比如研究论文或小说中的文本)，您可能会陷入寻呼。但是，当内容自然可搜索时(如支票帐户事务表)，好的、简单的过滤工具可能比分页方案更有用。(实际上，你可能两者都需要。)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|88128|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I think that a good alternative to paging is a way, or more than one way, for the user to tell the server something about what it is they're looking for. For some types of content (like, a whole lot of text, say from a research paper or a work of fiction), of course you're probably stuck with paging. But when the content is naturally searchable (like tables of checking account transactions), good, simple filtering tools are probably more useful than pagination schemes. (Actually you may need both.)

blocks|key|88178|text|我研究了一种GWT混合技术，它做了一个“无限滚动”，但一次只显示了一个“窗口/页面”的信息。因此，它只在任何给定的时间将固定数量的数据加载到浏览器。如果您可以显示20个项目并滚动它，只需一次更新列表中的20个项。分页不分页，滚动不滚动。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|88179|当然，这是实际实现的一个微不足道的定义，它比这听起来聪明得多，并且非常适合往返旅行。这是一张已经用搜索标准过滤掉的结果列表。他们携手并进。|88180|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/webtoolkit/^0|6|3|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

I worked on a <a href="http://code.google.com/webtoolkit/" rel="nofollow noreferrer">GWT</a> hybrid technique where it did an "infinite scroll" but only showed a "window/page" of information at a time. So it only loaded a fixed amount of data to the browser at any given time. If you could display 20 items and scrolled it just updated the list 20 items at a time. Paging without paging, scrolling without scrolling.

Of course this is a trivial definition of the actual implementation, which was much smarter than this sounds and very optimized for round trips. And this was a list of results that was already filtered down with search criteria. They go hand in hand.

blocks|key|88214|text|请看一下“对数”分页，正如我在这里的回答中所描述的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|88215|如何对许多，多页进行页面导航？对数页导航|offset|length|88216|这就像普通的分页，但是解决了在“.”中间到达页面的问题。没有多次重复漱口的范围。也就是说，10380页中的2456页需要多长时间才能到达，如果这些是您的链接:1+2+3+4+5.+10376+10377+10378+10379+10380？|88217|(但是，尖有，嗯.还有一点(！)|88218|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/q/7835752/999120^0|0|0|K|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

Take a look at 'logarithmic' pagination, as described in my answer here:

<a href="https://stackoverflow.com/q/7835752/999120">How to do page navigation for many, many pages? Logarithmic page navigation</a>

It's like regular pagination, but solves the problem of getting to pages in the middle of a '...' range without many repeated mouseclicks. i.e. How long would it take to get to page 2456 out of 10380 if these are your links: 1 2 3 4 5 ... 10376 10377 10378 10379 10380 ?

(But, Pointy has, uhm... a point also (!))

blocks|key|88231|text|下面是我最近构建的纯JavaScript分页控件的代码。它和你最喜欢的一样，有这些额外的好处。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|88232|点击..。允许快速跳转到任何页面。|unordered-list-item|88233|没有单词意味着没有本地化(在这个简单的控件中，不需要下一步、prev、第一、最后的按钮)|88234|没有依赖项(不需要jQuery)|88235|​|88236|var+Pagination+=+{
++code:+'',

++Extend:+function(data)+{
++++data+=+data+%7C%7C+{};
++++Pagination.size+=+data.size+%7C%7C+300;
++++Pagination.page+=+data.page+%7C%7C+1;
++++Pagination.step+=+data.step+%7C%7C+3;
++},

++Add:+function(s,+f)+{
++++for+(var+i+=+s;+i+<+f;+i%2B%2B)+{
++++++Pagination.code+%2B=+'<a>'+%2B+i+%2B+'</a>';
++++}
++},

++Last:+function()+{
++++Pagination.code+%2B=+'...<a>'+%2B+Pagination.size+%2B+'</a>';
++},

++First:+function()+{
++++Pagination.code+%2B=+'<a>1</a>...';
++},


++Click:+function()+{
++++Pagination.page+=+%2Bthis.innerHTML;
++++Pagination.Start();
++},

++Prev:+function()+{
++++Pagination.page--;
++++if+(Pagination.page+<+1)+{
++++++Pagination.page+=+1;
++++}
++++Pagination.Start();
++},

++Next:+function()+{
++++Pagination.page%2B%2B;
++++if+(Pagination.page+>+Pagination.size)+{
++++++Pagination.page+=+Pagination.size;
++++}
++++Pagination.Start();
++},

++TypePage:+function()+{
++++Pagination.code+=+'<input+onclick="this.setSelectionRange(0,+this.value.length);this.focus();"+onkeypress="if+(event.keyCode+==+13)+{+this.blur();+}"+value="'+%2B+Pagination.page+%2B+'"+/>+&nbsp;+/+&nbsp;+'+%2B+Pagination.size;
++++Pagination.Finish();
++++var+v+=+Pagination.e.getElementsByTagName('input')[0];
++++v.click();
++++v.addEventListener("blur",+function(event)+{

++++++var+p+=+parseInt(this.value);

++++++if+(!isNaN(parseFloat(p))+&&+isFinite(p))+{
++++++++if+(p+>+Pagination.size)+{
++++++++++p+=+Pagination.size;
++++++++}+else+if+(p+<+1)+{
++++++++++p+=+1;
++++++++}
++++++}+else+{
++++++++p+=+Pagination.page;
++++++}

++++++Pagination.Init(document.getElementById('pagination'),+{
++++++++size:+Pagination.size,
++++++++page:+p,
++++++++step:+Pagination.step
++++++});
++++},+false);
++},


++Bind:+function()+{
++++var+a+=+Pagination.e.getElementsByTagName('a');
++++for+(var+i+=+0;+i+<+a.length;+i%2B%2B)+{
++++++if+(%2Ba[i].innerHTML+===+Pagination.page)+a[i].className+=+'current';
++++++a[i].addEventListener('click',+Pagination.Click,+false);
++++}
++++var+d+=+Pagination.e.getElementsByTagName('i');
++++for+(i+=+0;+i+<+d.length;+i%2B%2B)+{
++++++d[i].addEventListener('click',+Pagination.TypePage,+false);
++++}
++},

++Finish:+function()+{
++++Pagination.e.innerHTML+=+Pagination.code;
++++Pagination.code+=+'';
++++Pagination.Bind();
++},

++Start:+function()+{
++++if+(Pagination.size+<+Pagination.step+*+2+%2B+6)+{
++++++Pagination.Add(1,+Pagination.size+%2B+1);
++++}+else+if+(Pagination.page+<+Pagination.step+*+2+%2B+1)+{
++++++Pagination.Add(1,+Pagination.step+*+2+%2B+4);
++++++Pagination.Last();
++++}+else+if+(Pagination.page+>+Pagination.size+-+Pagination.step+*+2)+{
++++++Pagination.First();
++++++Pagination.Add(Pagination.size+-+Pagination.step+*+2+-+2,+Pagination.size+%2B+1);
++++}+else+{
++++++Pagination.First();
++++++Pagination.Add(Pagination.page+-+Pagination.step,+Pagination.page+%2B+Pagination.step+%2B+1);
++++++Pagination.Last();
++++}
++++Pagination.Finish();
++},


++Buttons:+function(e)+{
++++var+nav+=+e.getElementsByTagName('a');
++++nav[0].addEventListener('click',+Pagination.Prev,+false);
++++nav[1].addEventListener('click',+Pagination.Next,+false);
++},

++Create:+function(e)+{
++++var+html+=+[
++++++'<a>&#9668;</a>',+//+previous+button
++++++'',+//+pagination+container
++++++'<a>&#9658;</a>'+//+next+button
++++];
++++e.innerHTML+=+html.join('');
++++Pagination.e+=+e.getElementsByTagName('span')[0];
++++Pagination.Buttons(e);
++},

++Init:+function(e,+data)+{
++++Pagination.Extend(data);
++++Pagination.Create(e);
++++Pagination.Start();
++}
};

var+init+=+function()+{
++Pagination.Init(document.getElementById('pagination'),+{
++++size:+30,+//+pages+size
++++page:+1,+//+selected+page
++++step:+2+//+pages+before+and+after+current
++});
};

document.addEventListener('DOMContentLoaded',+init,+false);|code-block|syntax|javascript|88237|html+{
++height:+100%25;
++width:+100%25;
++background-color:+#ffffff;
}
body+{
++margin:+0;
++height:+100%25;
++width:+100%25;
++text-align:+center;
++font-family:+Arial,+sans-serif;
}
body:before+{
++content:+'';
++display:+inline-block;
++width:+0;
++height:+100%25;
++vertical-align:+middle;
}
#pagination+{
++display:+inline-block;
++vertical-align:+middle;
++padding:+1px+2px+4px+2px;
++font-size:+12px;
++color:+#7D7D7D;
}
#pagination+a,
#pagination+i+{
++display:+inline-block;
++vertical-align:+middle;
++width:+22px;
++color:+#7D7D7D;
++text-align:+center;
++padding:+4px+0;
++-webkit-user-select:+none;
++-moz-user-select:+none;
++-ms-user-select:+none;
++-o-user-select:+none;
++user-select:+none;
}
#pagination+a+{
++margin:+0+2px+0+2px;
++cursor:+pointer;
}
#pagination+a:hover+{
++background-color:+#999;
++color:+#fff;
}
#pagination+i+{
++border:+2px+solid+transparent;
++cursor:+pointer;
}
#pagination+i:hover+{
++border:+2px+solid+#999;
++cursor:+pointer;
}
#pagination+input+{
++width:+40px;
++padding:+2px+4px;
++color:+#7D7D7D;
++text-align:+right;
}
#pagination+a.current+{
++border:+1px+solid+#E9E9E9;
++background-color:+#666;
++color:+#fff;
}|88238|<div+id="pagination"></div>|88239|88240|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$]]|$1|E|3|F|5|D|7|Y|8|@]|9|@]|A|$]]|$1|G|3|H|5|D|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|10|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|11|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|M|7|12|8|@]|9|@]|A|$N|O]]|$1|R|3|S|5|M|7|13|8|@]|9|@]|A|$N|O]]|$1|T|3|J|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

Here is the code for a pure JavaScript pagination control I built recently. It is similar to your favorite with these added benefits...

<ul>
<li>Clicking the ... allows quick jump to any page</li>
<li>No words means no localization (next, prev, first, last buttons aren't
needed in this simple control) </li>
<li>No dependencies (jQuery not required)</li>
</ul>

<div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var Pagination = {
 code: '',

 Extend: function(data) {
 data = data || {};
 Pagination.size = data.size || 300;
 Pagination.page = data.page || 1;
 Pagination.step = data.step || 3;
 },

 Add: function(s, f) {
 for (var i = s; i &lt; f; i++) {
 Pagination.code += '&lt;a&gt;' + i + '&lt;/a&gt;';
 }
 },

 Last: function() {
 Pagination.code += '&lt;i&gt;...&lt;/i&gt;&lt;a&gt;' + Pagination.size + '&lt;/a&gt;';
 },

 First: function() {
 Pagination.code += '&lt;a&gt;1&lt;/a&gt;&lt;i&gt;...&lt;/i&gt;';
 },


 Click: function() {
 Pagination.page = +this.innerHTML;
 Pagination.Start();
 },

 Prev: function() {
 Pagination.page--;
 if (Pagination.page &lt; 1) {
 Pagination.page = 1;
 }
 Pagination.Start();
 },

 Next: function() {
 Pagination.page++;
 if (Pagination.page &gt; Pagination.size) {
 Pagination.page = Pagination.size;
 }
 Pagination.Start();
 },

 TypePage: function() {
 Pagination.code = '&lt;input onclick="this.setSelectionRange(0, this.value.length);this.focus();" onkeypress="if (event.keyCode == 13) { this.blur(); }" value="' + Pagination.page + '" /&gt; &amp;nbsp; / &amp;nbsp; ' + Pagination.size;
 Pagination.Finish();
 var v = Pagination.e.getElementsByTagName('input')[0];
 v.click();
 v.addEventListener("blur", function(event) {

 var p = parseInt(this.value);

 if (!isNaN(parseFloat(p)) &amp;&amp; isFinite(p)) {
 if (p &gt; Pagination.size) {
 p = Pagination.size;
 } else if (p &lt; 1) {
 p = 1;
 }
 } else {
 p = Pagination.page;
 }

 Pagination.Init(document.getElementById('pagination'), {
 size: Pagination.size,
 page: p,
 step: Pagination.step
 });
 }, false);
 },


 Bind: function() {
 var a = Pagination.e.getElementsByTagName('a');
 for (var i = 0; i &lt; a.length; i++) {
 if (+a[i].innerHTML === Pagination.page) a[i].className = 'current';
 a[i].addEventListener('click', Pagination.Click, false);
 }
 var d = Pagination.e.getElementsByTagName('i');
 for (i = 0; i &lt; d.length; i++) {
 d[i].addEventListener('click', Pagination.TypePage, false);
 }
 },

 Finish: function() {
 Pagination.e.innerHTML = Pagination.code;
 Pagination.code = '';
 Pagination.Bind();
 },

 Start: function() {
 if (Pagination.size &lt; Pagination.step * 2 + 6) {
 Pagination.Add(1, Pagination.size + 1);
 } else if (Pagination.page &lt; Pagination.step * 2 + 1) {
 Pagination.Add(1, Pagination.step * 2 + 4);
 Pagination.Last();
 } else if (Pagination.page &gt; Pagination.size - Pagination.step * 2) {
 Pagination.First();
 Pagination.Add(Pagination.size - Pagination.step * 2 - 2, Pagination.size + 1);
 } else {
 Pagination.First();
 Pagination.Add(Pagination.page - Pagination.step, Pagination.page + Pagination.step + 1);
 Pagination.Last();
 }
 Pagination.Finish();
 },


 Buttons: function(e) {
 var nav = e.getElementsByTagName('a');
 nav[0].addEventListener('click', Pagination.Prev, false);
 nav[1].addEventListener('click', Pagination.Next, false);
 },

 Create: function(e) {
 var html = [
 '&lt;a&gt;&amp;#9668;&lt;/a&gt;', // previous button
 '&lt;span&gt;&lt;/span&gt;', // pagination container
 '&lt;a&gt;&amp;#9658;&lt;/a&gt;' // next button
 ];
 e.innerHTML = html.join('');
 Pagination.e = e.getElementsByTagName('span')[0];
 Pagination.Buttons(e);
 },

 Init: function(e, data) {
 Pagination.Extend(data);
 Pagination.Create(e);
 Pagination.Start();
 }
};

var init = function() {
 Pagination.Init(document.getElementById('pagination'), {
 size: 30, // pages size
 page: 1, // selected page
 step: 2 // pages before and after current
 });
};

document.addEventListener('DOMContentLoaded', init, false);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>html {
 height: 100%;
 width: 100%;
 background-color: #ffffff;
}
body {
 margin: 0;
 height: 100%;
 width: 100%;
 text-align: center;
 font-family: Arial, sans-serif;
}
body:before {
 content: '';
 display: inline-block;
 width: 0;
 height: 100%;
 vertical-align: middle;
}
#pagination {
 display: inline-block;
 vertical-align: middle;
 padding: 1px 2px 4px 2px;
 font-size: 12px;
 color: #7D7D7D;
}
#pagination a,
#pagination i {
 display: inline-block;
 vertical-align: middle;
 width: 22px;
 color: #7D7D7D;
 text-align: center;
 padding: 4px 0;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none;
}
#pagination a {
 margin: 0 2px 0 2px;
 cursor: pointer;
}
#pagination a:hover {
 background-color: #999;
 color: #fff;
}
#pagination i {
 border: 2px solid transparent;
 cursor: pointer;
}
#pagination i:hover {
 border: 2px solid #999;
 cursor: pointer;
}
#pagination input {
 width: 40px;
 padding: 2px 4px;
 color: #7D7D7D;
 text-align: right;
}
#pagination a.current {
 border: 1px solid #E9E9E9;
 background-color: #666;
 color: #fff;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="pagination"&gt;&lt;/div&gt;</code></pre>
</div>
</div>

blocks|key|88262|text|这里有一个很酷的对数分页解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|88263|http://jobcloud.cz/glPagiSmart.jc|offset|length|88264|但我不确定到底有多少人想要使用十六进制或二进制实现:)|88265|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|X|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

There's a cool logarithmic pagination solution here:

<a href="http://jobcloud.cz/glPagiSmart.jc" rel="nofollow">http://jobcloud.cz/glPagiSmart.jc</a>

But I'm not sure how many people would actually want to use the hex or binary implementations :)

I am looking for ideas for pagination alternatives. I am aware of 2 pagination schemes:

<ul>
<li>Click on pages pagination - <a href="http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm" rel="noreferrer">my favorite example</a></li>
<li>Infinite scroll pagination - one implementation <a href="http://dzone.com/" rel="noreferrer">here</a> that seems to work</li>
</ul>

There must be some other less known/popular ways to do it. Bonus points if you can provide a link to a demo

Thanks

Pagination Alternatives

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在寻找分页替代方案的想法。我知道有两个分页计划：点击页面分页- 无限滚动分页-一个似乎有效的实现一定有其他一些不太为人所知的/流行的方法去做。如果您可以提供到演示的链接，则奖励积分。谢谢

问分页选择
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问分页选择EN