javascript - 你們怎樣實現前端分頁的？

問題描述

后端的nodejs我能夠實現分頁但是前端的代碼如何寫呀？

問題解答

估計題主需要的是前端分頁腳本吧：

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 : ’首頁’,style : options.pageId == 1 ? 'disabled' : '',link : options.getLink(1) }); page.push({name : ’上一頁’,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 : ’下一頁’,style : options.pageId == options.pageCount ? 'disabled' : '',link : options.getLink(options.pageId + 1) }); page.push({name : ’尾頁’,style : options.pageId == options.pageCount ? 'disabled' : '',link : options.getLink(options.pageCount) }); page.toString = function(){return page.map(function(item){ return ’<a href='http://www.wxshucaidpc.com/wenda/’ + item.link + ’' class='’ + item.style + ’'>’ + item.name + ’</a>’;}).join(''); }; return page;};getPageList({pageId:1,pageRecord:1200});/* [{'name':'首頁','style':'disabled','link':'?page=1'},{'name':'上一頁','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':'下一頁','style':'','link':'?page=2'},{'name':'尾頁','style':'','link':'?page=120'} ]*/’’ + getPageList({pageId:1,pageRecord:1200,pageUrlTemplate:’/category/{PAGE}/view’});/* <a href='http://www.wxshucaidpc.com/category/1/view' class='disabled'>首頁</a> <a href='http://www.wxshucaidpc.com/category/0/view' class='disabled'>上一頁</a> <a href='http://www.wxshucaidpc.com/category/1/view' class='active'>1</a> <a href='http://www.wxshucaidpc.com/category/2/view' class=''>2</a> <a href='http://www.wxshucaidpc.com/category/3/view' class=''>3</a> <a href='http://www.wxshucaidpc.com/category/4/view' class=''>4</a> <a href='http://www.wxshucaidpc.com/category/5/view' class=''>5</a> <a href='http://www.wxshucaidpc.com/category/6/view' class=''>6</a> <a href='http://www.wxshucaidpc.com/category/7/view' class=''>7</a> <a href='http://www.wxshucaidpc.com/category/8/view' class=''>8</a> <a href='http://www.wxshucaidpc.com/category/9/view' class=''>9</a> <a href='http://www.wxshucaidpc.com/category/10/view' class=''>10</a> <a href='http://www.wxshucaidpc.com/category/2/view' class=''>下一頁</a> <a href='http://www.wxshucaidpc.com/category/120/view' class=''>尾頁</a>*/

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

前端直接寫啊 1，2，3，4，5....點擊的時候 把相應的數字如‘4’，發送到后端后端寫sql語句如：select ＊ from tab limit a*10,b

這個sql應該能懂把，

注： 如果數據庫數據很多的話 使用這種sql效率不高

前端根據后端需要的參數來發送請求啊，發什么參數取到對應的數據，就實現分頁了，就是每次翻頁都是需要發送ajax的

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