NodeJS和BootStrap分頁效果的實(shí)現(xiàn)代碼
1、數(shù)據(jù)處理
首先在動態(tài)js中，根據(jù)url參數(shù)獲取數(shù)據(jù)庫文檔的數(shù)量，設(shè)置分頁的大小，獲取當(dāng)前頁面的數(shù)據(jù)，然后將文檔數(shù)量pagecount，分頁大小pagesize，以及當(dāng)前頁面currentpage傳遞到頁面中。
2、處理分頁效果
我采用的是JavaScript動態(tài)生成的，你也可以利用ejs支持函數(shù)的特性將其封裝后生成html形式的分頁。
首先，添加分頁ul，在你的頁面中需要顯示的位置添加代碼：
<ul class="pagination" id="pagination"> </ul>
然后在script標(biāo)簽中插入處理分頁的代碼：
$(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ù)量，分頁大小，當(dāng)前分頁，他們是從js中傳遞過來的，當(dāng)然，你也可以直接修改它們?yōu)楣潭ǖ臄?shù)據(jù)測試下效果。
比如：
實(shí)際效果為：
這樣一個(gè)簡單的分頁效果就出來了
以上所述是小編給大家介紹的NodeJS和BootStrap分頁效果的實(shí)現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- nodeJS與MySQL實(shí)現(xiàn)分頁數(shù)據(jù)以及倒序數(shù)據(jù)
- Vue+Node實(shí)現(xiàn)商品列表的分頁、排序、篩選，添加購物車功能詳解
- NodeJs操作MongoDB教程之分頁功能以及常見問題
- Node.js中Bootstrap-table的兩種分頁的實(shí)現(xiàn)方法
- nodejs mysql 實(shí)現(xiàn)分頁的方法
- nodejs個(gè)人博客開發(fā)第六步 數(shù)據(jù)分頁
- node.js基于mongodb的搜索分頁示例
- nodejs分頁類代碼分享
- node+express實(shí)現(xiàn)分頁效果
相關(guān)文章
Node.js實(shí)現(xiàn)批量替換文件內(nèi)容示例
這篇文章主要為大家介紹了Node.js實(shí)現(xiàn)批量替換文件內(nèi)容示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
nodejs 生成和導(dǎo)出 word的實(shí)例代碼
前段時(shí)間由于項(xiàng)目需求，得做excel和word的導(dǎo)出功能.這篇文章主要介紹了nodejs 生成和導(dǎo)出 word的實(shí)例代碼,需要的朋友可以參考下2018-07-07
什么時(shí)候不能在 Node.js 中使用 Lock Files
這篇文章主要介紹了什么時(shí)候不能在 Node.js 中使用 Lock Files，但是當(dāng)你在開發(fā)要發(fā)布到 npm 的包時(shí)，應(yīng)避免使用這類 lock file 。下面我們來一起了解一下吧2019-06-06
這篇文章主要介紹了node.js中的path.extname方法使用說明,本文介紹了path.extname的方法說明、語法、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
本文詳細(xì)介紹了在Node.js中如何修改全局變量,包括全局變量的定義方式、正確的修改姿勢、潛在的隱患及其解決方案,以及推薦的替代方案,總結(jié)建議了在實(shí)際應(yīng)用中應(yīng)盡量避免使用全局變量,轉(zhuǎn)而采用模塊化、可維護(hù)性更高的方法,感興趣的朋友一起看看吧2025-02-02
nodejs中express入門和基礎(chǔ)知識點(diǎn)學(xué)習(xí)
這篇文章給大家分享了關(guān)于學(xué)習(xí)nodejs中express入門和基礎(chǔ)知識點(diǎn)內(nèi)容，有興趣的朋友們參考下。2018-09-09
這篇文章主要給大家介紹了關(guān)于Node.js中 __dirname使用的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06
MongoDB 是一個(gè)基于分布式文件存儲的數(shù)據(jù)庫，由 C++ 語言編寫。這篇文章主要介紹了NodeJS中的MongoDB快速入門詳細(xì)教程的相關(guān)資料,需要的朋友可以參考下2016-11-11
眾所周知Vue是現(xiàn)在前端最流行的框架之一,作為前端開發(fā)人員應(yīng)該要熟練的掌握它,下面這篇文章主要給大家介紹了關(guān)于node.js快速部署vue代碼的詳細(xì)步驟,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
node爬取新型冠狀病毒的疫情實(shí)時(shí)動態(tài)
這篇文章主要介紹了node爬取新型冠狀病毒的疫情實(shí)時(shí)動態(tài),非常不錯(cuò)，本文通過實(shí)例代碼給大家講解的非常詳細(xì)，需要的朋友可以參考下2020-02-02