私のカスタムページネージングを続行する方法が残っています。この例ではコンテンツ部分はありませんが、その方法を知っています。クリックしたインデックスを非表示にして表示するだけです。jqueryプラグインなしでカスタムページ区切りロジックを構築します
私はページネーションのためのUIを分割するためには、この 
http://jsbin.com/qulipamecu/1/edit?html,css,js,output
var html = '';
for(var i in item){
html += '<li>' + item[i] + '</li>';
}
のように、より良いUXに要素を分割して処理する方法にこだわっているが、ハードは本当にありませんが、どのように複雑にしたいかに応じて
例として、私はjQueryの助けを借りずにjsbinにコードを再実装し、isPageInRangeという関数を追加しました。ページが現在範囲内にあるかどうかをチェックし、trueまたはfalseを返します。
だから、メインのロジックの変更は次のとおりです。
for(var i in item){
if (isPageInRange(curPage, i, pageLen, 2, 2)) {
html += '<li data-page="' + i + '">' + item[i] + '</li>';
// as we added a page, we reset the separatorAdded
separatorAdded = false;
} else {
if (!separatorAdded) {
// only add a separator when it wasn't added before
html += '<li class="separator" />';
separatorAdded = true;
}
}
}
ページが範囲内にない場合には、まだ追加されていないとき、あなただけ（セパレータを追加することができます - > [次へ]複数のセパレータを望んでいません
）お互いにサンプルがあることを前提としています
アクティブでなければなりません前と後にどのように多くのページを設定したい
var pageLen = 20;
var curPage = 2;
var item = [];
for(var i = 1; i<=pageLen;i++){
item.push(i);
}
function isPageInRange(curPage, index, maxPages, pageBefore, pageAfter) {
if (index <= 1) {
// first 2 pages
return true;
}
if (index >= maxPages - 2) {
// last 2 pages
return true;
}
if (index >= curPage - pageBefore && index <= curPage + pageAfter) {
return true;
}
}
function render(curPage, item, first) {
var html = '', separatorAdded = false;
for(var i in item){
if (isPageInRange(curPage, i, pageLen, 2, 2)) {
html += '<li data-page="' + i + '">' + item[i] + '</li>';
// as we added a page, we reset the separatorAdded
separatorAdded = false;
} else {
if (!separatorAdded) {
// only add a separator when it wasn't added before
html += '<li class="separator" />';
separatorAdded = true;
}
}
}
var holder = document.querySelector('#holder');
holder.innerHTML = html;
document.querySelector('#holder>li[data-page="' + curPage + '"]').classList.add('active');
if (first) {
holder.addEventListener('click', function(e) {
if (!e.target.getAttribute('data-page')) {
// no relevant item clicked (you could however offer expand here)
return;
}
curPage = parseInt(e.target.getAttribute('data-page'));
render(curPage, item);
});
}
}
render(2, item, true);#holder > li {
padding: 5px;
margin: 2px;
display: inline-block;
}
#holder > li[data-page] {
border: solid #a0a0a0 1px;
border-radius: 5px;
}
#holder > li.separator:before {
content: '...';
}
#holder > li.active {
background-color: darkblue;
color: #fff;
}
#holder > li[data-page]:hover {
cursor: pointer;
}<div id="holder"></div>
あなたはjsbinに追加したコードの多くを追加してください、それはあなたが持っている完全に有効な質問ですね、それはここでそれを追加するために理にかなっています – Icepickle