問(wèn)題描述

后端的nodejs我能夠?qū)崿F(xiàn)分頁(yè)但是前端的代碼如何寫(xiě)呀？

問(wèn)題解答

估計(jì)題主需要的是前端分頁(yè)腳本吧：

var getPageList = function(options){ if(typeof options != 'object' || !(’pageId’ in options) || !(’pageRecord’ in options)){throw Error('options Error! eg:{pageId:1, pageRecord:12, pageUrlTemplate : ’/page/{PAGE}/’}'); }; options.pageId = parseInt(options.pageId); options.pageRecord = parseInt(options.pageRecord); options.pageSize = options.pageSize || 10;options.pageUrlTemplate = options.pageUrlTemplate || '?page={PAGE}'; options.pageCount = parseInt(( options.pageRecord - 1 ) / options.pageSize ) + 1;var page = []; var firstPage = parseInt(( options.pageId - 1 ) / options.pageSize ) * options.pageSize + 1;options.getLink = options.getLink || function(pageId){return options.pageUrlTemplate.replace('{PAGE}', pageId); };page.push({name : ’首頁(yè)’,style : options.pageId == 1 ? 'disabled' : '',link : options.getLink(1) }); page.push({name : ’上一頁(yè)’,style : options.pageId == 1 ? 'disabled' : '',link : options.getLink(options.pageId - 1) }); for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){if( pageId >= 1 && pageId <= options.pageCount ){ page.push({name : pageId,link : options.getLink(pageId),style : pageId == options.pageId ? 'active' : '' });} } page.push({name : ’下一頁(yè)’,style : options.pageId == options.pageCount ? 'disabled' : '',link : options.getLink(options.pageId + 1) }); page.push({name : ’尾頁(yè)’,style : options.pageId == options.pageCount ? 'disabled' : '',link : options.getLink(options.pageCount) }); page.toString = function(){return page.map(function(item){ return ’<a href='http://www.leifengta.com.cn/wenda/’ + item.link + ’' class='’ + item.style + ’'>’ + item.name + ’</a>’;}).join(''); }; return page;};getPageList({pageId:1,pageRecord:1200});/* [{'name':'首頁(yè)','style':'disabled','link':'?page=1'},{'name':'上一頁(yè)','style':'disabled','link':'?page=0'},{'name':1,'link':'?page=1','style':'active'},{'name':2,'link':'?page=2','style':''},{'name':3,'link':'?page=3','style':''},{'name':4,'link':'?page=4','style':''},{'name':5,'link':'?page=5','style':''},{'name':6,'link':'?page=6','style':''},{'name':7,'link':'?page=7','style':''},{'name':8,'link':'?page=8','style':''},{'name':9,'link':'?page=9','style':''},{'name':10,'link':'?page=10','style':''},{'name':'下一頁(yè)','style':'','link':'?page=2'},{'name':'尾頁(yè)','style':'','link':'?page=120'} ]*/’’ + getPageList({pageId:1,pageRecord:1200,pageUrlTemplate:’/category/{PAGE}/view’});/* <a href='http://www.leifengta.com.cn/category/1/view' class='disabled'>首頁(yè)</a> <a href='http://www.leifengta.com.cn/category/0/view' class='disabled'>上一頁(yè)</a> <a href='http://www.leifengta.com.cn/category/1/view' class='active'>1</a> <a href='http://www.leifengta.com.cn/category/2/view' class=''>2</a> <a href='http://www.leifengta.com.cn/category/3/view' class=''>3</a> <a href='http://www.leifengta.com.cn/category/4/view' class=''>4</a> <a href='http://www.leifengta.com.cn/category/5/view' class=''>5</a> <a href='http://www.leifengta.com.cn/category/6/view' class=''>6</a> <a href='http://www.leifengta.com.cn/category/7/view' class=''>7</a> <a href='http://www.leifengta.com.cn/category/8/view' class=''>8</a> <a href='http://www.leifengta.com.cn/category/9/view' class=''>9</a> <a href='http://www.leifengta.com.cn/category/10/view' class=''>10</a> <a href='http://www.leifengta.com.cn/category/2/view' class=''>下一頁(yè)</a> <a href='http://www.leifengta.com.cn/category/120/view' class=''>尾頁(yè)</a>*/

如果提主恰巧使用的是 AngularJS，可以下載直接使用我的開(kāi)源小項(xiàng)目：ng-pagination。

前端直接寫(xiě)啊 1，2，3，4，5....點(diǎn)擊的時(shí)候 把相應(yīng)的數(shù)字如‘4’，發(fā)送到后端后端寫(xiě)sql語(yǔ)句如：select ＊ from tab limit a*10,b

這個(gè)sql應(yīng)該能懂把，

注： 如果數(shù)據(jù)庫(kù)數(shù)據(jù)很多的話 使用這種sql效率不高

前端根據(jù)后端需要的參數(shù)來(lái)發(fā)送請(qǐng)求啊，發(fā)什么參數(shù)取到對(duì)應(yīng)的數(shù)據(jù)，就實(shí)現(xiàn)分頁(yè)了，就是每次翻頁(yè)都是需要發(fā)送ajax的

比如。后臺(tái)進(jìn)行200條每頁(yè)的數(shù)據(jù)分頁(yè)來(lái)傳給前端，并傳回來(lái)總頁(yè)數(shù)。前端就可以做每頁(yè)10、20、50、100等不同條數(shù)的展示。前端做個(gè)計(jì)算，把前端的頁(yè)碼和后臺(tái)分頁(yè)頁(yè)碼相對(duì)應(yīng)。每頁(yè)數(shù)據(jù)就直接在200條里面取就好了。像angular，ng-repeat='item in items.slice(page*10, 10)'。封裝個(gè)指令，屢試不爽