建立自定義分頁邏輯沒有jquery插件

我被困在如何繼續我的自定義分頁。在示例中，我沒有內容部分，但我知道如何做到這一點，只需隱藏並顯示所點擊索引的基礎。建立自定義分頁邏輯沒有jquery插件

我被困在如何分割和處理元素爲更好的UX，這樣

http://jsbin.com/qulipamecu/1/edit?html,css,js,output

var html = ''; 
for(var i in item){ 
    html += '<li>' + item[i] + '</li>'; 
    }

來源

2017-01-16 Nately Jamerson

請添加更多的你加入jsbin的代碼，它是你有一個完全有效的問題，它是有道理的添加在這裏 – Icepickle

要做到拆分爲UI分頁是不是真的那麼難，取決於你希望如何複雜

作爲一個例子，我沒有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; 
    } 
    } 
}

如果該頁面不在範圍內，你可以添加一個分隔符（如果尚未添加 - >你不希望下一個多重分隔符對方）

該示例假定：

你想擁有第2頁總是可見
你希望最後2頁總是可見
您想要配置您的當前頁面應該有多少個頁面之前和之後的活躍

至於其他，我做了一些小改動，例如：

（活動）的選擇是基於數據的頁面屬性
滿格是可點擊（和點擊處理程序被添加僅在第一次）
滿格是重新渲染時，頁面更改

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>

來源

2017-01-16 12:27:16 Icepickle

建立自定義分頁邏輯沒有jquery插件

回答

相關問題