建立自定义分页逻辑没有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插件

回答

相关问题