NodeJS和BootStrap分頁效果的實現(xiàn)代碼

更新時間：2016年11月07日 10:23:17 作者：l284849736

這篇文章主要介紹了NodeJS和BootStrap分頁效果的實現(xiàn)代碼的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下

1、數(shù)據(jù)處理

首先在動態(tài)js中，根據(jù)url參數(shù)獲取數(shù)據(jù)庫文檔的數(shù)量，設置分頁的大小，獲取當前頁面的數(shù)據(jù)，然后將文檔數(shù)量pagecount，分頁大小pagesize，以及當前頁面currentpage傳遞到頁面中。

2、處理分頁效果

我采用的是JavaScript動態(tài)生成的，你也可以利用ejs支持函數(shù)的特性將其封裝后生成html形式的分頁。

首先，添加分頁ul，在你的頁面中需要顯示的位置添加代碼：

<ul class="pagination" id="pagination">
</ul>

然后在script標簽中插入處理分頁的代碼：

$(document).ready(function() {
if($("#pagination")){
var pagecount = <%= locals.pagecount %>;
var pagesize = <%= locals.pagesize %>;
var currentpage = <%= locals.currentpage %>;
var counts,pagehtml="";
if(pagecount%pagesize==0){
counts = parseInt(pagecount/pagesize);
}else{
counts = parseInt(pagecount/pagesize)+1;
}
//只有一頁內(nèi)容
if(pagecount<=pagesize){pagehtml="";}
//大于一頁內(nèi)容
if(pagecount>pagesize){
if(currentpage>1){
pagehtml+= '<li><a rel="external nofollow" href="/course/index/'+(currentpage-1)+'">上一頁</a></li>';
}
for(var i=0;i<counts;i++){
if(i>=(currentpage-3) && i<(currentpage+3)){
if(i==currentpage-1){
pagehtml+= '<li class="active"><a rel="external nofollow" href="/course/index/'+(i+1)+'">'+(i+1)+'</a></li>';
}else{
pagehtml+= '<li><a rel="external nofollow" href="/course/index/'+(i+1)+'">'+(i+1)+'</a></li>';
}

}
}
if(currentpage<counts){
pagehtml+= '<li><a rel="external nofollow" href="/course/index/'+(currentpage+1)+'">下一頁</a></li>';
}
}
$("#pagination").html(pagehtml);
}
});

注意：locals.pagecount，locals.pagesize，locals.currentpage分別是數(shù)據(jù)庫數(shù)量，分頁大小，當前分頁，他們是從js中傳遞過來的，當然，你也可以直接修改它們?yōu)楣潭ǖ臄?shù)據(jù)測試下效果。

比如：