NodeJS和BootStrap分頁效果的實作程式碼

1、資料處理

首先在動態js中，根據url參數取得資料庫文件的數量，設定分頁的大小，取得目前頁面的數據，然後將文件數量pagecount，分頁大小pagesize，以及目前頁面currentpage傳遞到頁面中。

2、處理分頁效果

我採用的是JavaScript動態產生的，你也可以利用ejs支援函數的特性將其封裝後產生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;
}
//只有一页内容
if(pagecount<=pagesize){pagehtml="";}
//大于一页内容
if(pagecount>pagesize){
if(currentpage>1){
pagehtml+= &#39;<li><a rel="external nofollow" href="/course/index/&#39;+(currentpage-1)+&#39;">上一页</a></li>&#39;;
}
for(var i=0;i<counts;i++){
if(i>=(currentpage-3) && i<(currentpage+3)){
if(i==currentpage-1){
pagehtml+= &#39;<li class="active"><a rel="external nofollow" href="/course/index/&#39;+(i+1)+&#39;">&#39;+(i+1)+&#39;</a></li>&#39;;
}else{
pagehtml+= &#39;<li><a rel="external nofollow" href="/course/index/&#39;+(i+1)+&#39;">&#39;+(i+1)+&#39;</a></li>&#39;;
}
 
}
}
if(currentpage<counts){
pagehtml+= &#39;<li><a rel="external nofollow" href="/course/index/&#39;+(currentpage+1)+&#39;">下一页</a></li>&#39;;
}
}
$("#pagination").html(pagehtml);
}
});

注意：locals.pagecount，locals.pagesize，locals.currentpage分別是資料庫數量，分頁大小，目前分頁，他們是從js傳遞過來的，當然，你也可以直接修改它們為固定的資料測試下效果。

例如：

實際效果為：

這樣一個簡單的分頁效果就出來了

這樣一個簡單的分頁效果就出來了

以上所述是小編給大家介紹的NodeNode大家有幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對PHP中文網的支持！

🎜更多NodeJS和BootStrap分頁效果的實現代碼相關文章請關注PHP中文網！ 🎜🎜🎜🎜🎜