私はページネーションの代替案のアイデアを探しています。私は2つのページネーションスキームを知っています：
それを行うには、他にもあまり知られていない/人気のある方法がいくつかあるはずです。デモへのリンクを提供できる場合のボーナスポイント
ありがとう
質問する
5129 次
5 に答える
5
ページングの良い代替手段は、ユーザーがサーバーに探しているものについて何かを伝える方法、または複数の方法だと思います。一部の種類のコンテンツ（たとえば、研究論文やフィクションの作品からの大量のテキストなど）の場合、もちろん、ページングに悩まされている可能性があります。ただし、コンテンツが自然に検索可能である場合（当座預金口座のトランザクションをチェックするテーブルなど）、ページネーションスキームよりも優れたシンプルなフィルタリングツールの方がおそらく便利です。（実際には両方が必要な場合があります。）
于 2010-05-04T13:20:40.530 に答える
2
ここでの私の答えで説明されているように、「対数」ページネーションを見てください。
多くの、多くのページのページナビゲーションを行う方法は？対数ページナビゲーション
これは通常のページネーションに似ていますが、マウスを何度もクリックすることなく、「...」の範囲の中央にあるページに到達するという問題を解決します。つまり、これらがリンクである場合、10380から2456ページに到達するのにどのくらい時間がかかりますか：1 2 3 4 5 ... 10376 10377 10378 10379 10380？
（しかし、Pointyには、ええと...ポイントもあります（！））
于 2013-01-07T11:53:11.927 に答える
2
私は「無限スクロール」を実行するGWTハイブリッド手法に取り組みましたが、一度に表示されるのは情報の「ウィンドウ/ページ」のみでした。そのため、常に一定量のデータのみをブラウザにロードしました。20個のアイテムを表示してスクロールできる場合は、一度に20個のアイテムのリストを更新するだけです。ページングなしのページング、スクロールなしのスクロール。
もちろん、これは実際の実装の簡単な定義であり、このサウンドよりもはるかにスマートで、往復用に非常に最適化されています。そして、これは検索条件ですでにフィルタリングされた結果のリストでした。彼らは手をつないで行きます。
于 2010-07-09T02:08:20.110 に答える
0
これは、最近作成した純粋なJavaScriptページ付けコントロールのコードです。これらの追加の利点を備えたお気に入りに似ています...
- ...をクリックすると、任意のページにすばやくジャンプできます
- 単語がないということは、ローカリゼーションがないことを意味します（この単純なコントロールでは、次、前、最初、最後のボタンは必要ありません）
- 依存関係なし（jQueryは不要）
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 < f; i++) {
Pagination.code += '<a>' + i + '</a>';
}
},
Last: function() {
Pagination.code += '<i>...</i><a>' + Pagination.size + '</a>';
},
First: function() {
Pagination.code += '<a>1</a><i>...</i>';
},
Click: function() {
Pagination.page = +this.innerHTML;
Pagination.Start();
},
Prev: function() {
Pagination.page--;
if (Pagination.page < 1) {
Pagination.page = 1;
}
Pagination.Start();
},
Next: function() {
Pagination.page++;
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="' + Pagination.page + '" /> / ' + 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++) {
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 < 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 < Pagination.step * 2 + 6) {
Pagination.Add(1, Pagination.size + 1);
} else if (Pagination.page < Pagination.step * 2 + 1) {
Pagination.Add(1, Pagination.step * 2 + 4);
Pagination.Last();
} else if (Pagination.page > 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 = [
'<a>◄</a>', // previous button
'<span></span>', // pagination container
'<a>►</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);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;
}<div id="pagination"></div>于 2014-11-26T04:21:58.780 に答える
0
ここにクールな対数ページネーションソリューションがあります：
http://jobcloud.cz/glPagiSmart.jc
しかし、実際に16進数または2進数の実装を使用したいと思う人が何人いるかはわかりません:)
于 2016-04-14T07:16:07.250 に答える