您好,登錄后才能下訂單哦!
小編給大家分享一下nodejs中如何實(shí)現(xiàn)數(shù)據(jù)分頁(yè),相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
具體內(nèi)容如下
控制器路由定義
首頁(yè)路由:http://localhost:8888/
首頁(yè)分頁(yè)路由:http://localhost:8888/index/2
/** * 首頁(yè)控制器 */ var router=express.Router(); /*每頁(yè)條數(shù)*/ var pageSize=4; /*首頁(yè)*/ router.get('/',function(req,res,next){ var cid=0; F.model("article").assignIndexData(cid,1,pageSize,res); }); /*首頁(yè)分頁(yè)*/ router.get('/index/:page',function(req,res,next){ var currentPage=parseInt(req.params.page); var cid=0; F.model("article").assignIndexData(cid,currentPage,pageSize,res); });
分類列表分頁(yè)路由:http://localhost:8888/category/分類id/分頁(yè)
/*分類頁(yè)*/ router.get('/category/:cid/:page',function(req,res,next){ var cid=req.params.cid; var currentPage=parseInt(req.params.page); F.model("article").assignIndexData(cid,currentPage,pageSize,res); });
模型數(shù)據(jù)部分
控制器調(diào)用article模型的assignIndexData()方法,參數(shù):分類id,當(dāng)前頁(yè),每頁(yè)條數(shù),響應(yīng)對(duì)象
調(diào)用category模型的getAllList()方法得到分類list,參數(shù):回調(diào)函數(shù)
調(diào)用article模型的getCount()方法得到總條數(shù),參數(shù):分類id,回調(diào)函數(shù)
調(diào)用article模型的getArticlePager()方法得到文章對(duì)象的數(shù)據(jù)list,參數(shù):分類id,當(dāng)前頁(yè),每頁(yè)條數(shù),回調(diào)函數(shù)
對(duì)上一頁(yè),下一頁(yè)進(jìn)行-1和+1,并進(jìn)行判斷,上一頁(yè)應(yīng)大于0,下一頁(yè)應(yīng)小于等于總頁(yè)數(shù)(總條數(shù)/每頁(yè)條數(shù) 向上取整)
把數(shù)據(jù)分配到模板上
/** * 文章模型文件 */ module.exports={ /*獲取條數(shù)*/ getCount:function(categoryId,callback){ var condition=""; if(categoryId!=0){ condition="where category_id="+categoryId; } var sql="select count(*) num from article "+condition; db.query(sql,callback); }, /*獲取分頁(yè)數(shù)據(jù)*/ getArticlePager:function(categoryId,currentPage,pageSize,callback){ if(currentPage<=0||!currentPage) currentPage=1; var start=(currentPage-1)*pageSize; var end=pageSize; var condition=""; if(categoryId!=0){ condition="where category_id="+categoryId; } var sql="select * from article "+condition+" order by time desc limit "+start+","+end; db.query(sql,callback); }, /*歸檔*/ getArchives:function(callback){ db.query("select time from article order by time desc",callback); }, /*分配首頁(yè)數(shù)據(jù)*/ assignIndexData:function(cid,currentPage,pageSize,res){ var categoryModel=F.model("category"); var articleModel=this; // 分類數(shù)據(jù) categoryModel.getAllList(function(err,categoryList){ // 文章條數(shù) articleModel.getCount(cid,function(err,nums){ // 文章分頁(yè) articleModel.getArticlePager(cid,currentPage,pageSize,function(err,articleList){ var nextPage=(currentPage+1)>=Math.ceil(nums[0].num/pageSize) ? Math.ceil(nums[0].num/pageSize) : currentPage+1; var prePage=(currentPage-1)<=0 ? 1 : currentPage-1; // 歸檔 articleModel.getArchives(function(err,allArticleTime){ var newArticleTime=[]; for(var i=0;i<allArticleTime.length;i++){ newArticleTime.push(F.phpDate("y年m月",allArticleTime[i].time)); } /*分配數(shù)據(jù)*/ var data={ categoryList:categoryList, articleList:articleList, cid:cid, nextPage:nextPage==0 ? 1 : nextPage, prePage:prePage, allArticleTime:newArticleTime, currentPage:currentPage }; /*渲染模板*/ res.render("home/index",data); }); }); }); }); } };
模板部分
<nav> <ul class="pager"> <li><a class="btn <%if(currentPage==prePage){%>disabled<%}%>" href="/<%if(cid!=0){%>category/<%=cid%>/<%}else{%>index/<%}%><%=prePage%>" rel="external nofollow" >上一頁(yè)</a></li> <li><a class="btn <%if(currentPage==nextPage){%>disabled<%}%>" href="/<%if(cid!=0){%>category/<%=cid%>/<%}else{%>index/<%}%><%=nextPage%>" rel="external nofollow" >下一頁(yè)</a></li> </ul> </nav>
效果圖:
以上是“nodejs中如何實(shí)現(xiàn)數(shù)據(jù)分頁(yè)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。