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

2019-11-19 19:02:23

字體：大中小

供稿：網(wǎng)友

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

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

2、處理分頁(yè)效果

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

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

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

然后在script標(biāo)簽中插入處理分頁(yè)的代碼：

$(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;}//只有一頁(yè)內(nèi)容if(pagecount<=pagesize){pagehtml="";}//大于一頁(yè)內(nèi)容if(pagecount>pagesize){if(currentpage>1){pagehtml+= '<li><a rel="external nofollow" href="/course/index/'+(currentpage-1)+'">上一頁(yè)</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)+'">下一頁(yè)</a></li>';}}$("#pagination").html(pagehtml);}});

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

比如：

實(shí)際效果為：

這樣一個(gè)簡(jiǎn)單的分頁(yè)效果就出來(lái)了

以上所述是小編給大家介紹的NodeJS和BootStrap分頁(yè)效果的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！

上一篇：EasyUI 中combotree 默認(rèn)不能選擇父節(jié)點(diǎn)的實(shí)現(xiàn)方法

下一篇：AngularJs基于角色的前端訪問(wèn)控制的實(shí)現(xiàn)