//page(JSON對象);所有屬性見代碼中ops define(function (require, exports, module) { module.exports= function(os){//可用配置屬性var ops = {total:0 //記錄數, page:0 //當前頁, count:0 //或當前記錄數, side:5 //當前頁左右數字頁個數, per:5 //每頁條數//模板的值非''才顯示,占位符有{=page},{=maxPage},{=total},{=currentPage}, firstTPL:'<a href="?{=page}">首頁</a>' //首頁模板, lastTPL:'<a href="?{=page}">末頁</a>' //末頁模板, prevTPL:'<a href="?{=page}">上頁</a>' //上頁模板, nextTPL:'<a href="?{=page}">下頁</a>' //下頁模板, prevSideTPL:'<a href="?{=page}"><<</a>' //前組模板(快退), nextSideTPL:'<a href="?{=page}">>></a>' //后組模板(快進), numberTPL:'<a href="?{=page}">{=page}</a>' //頁碼形式模板, pageTPL:'<a href="#{=page}">{=page}</a>' //當前頁碼模板, jumpTPL:'' //跳轉form}; for (var o in ops)o in os && (ops[o]=os[o]); function parseTPL(tpl,json) {if (!tpl)return '';json.maxPage = ops.maxp;json.total = ops.total;json.currentPage = ops.page;return String(tpl).replace(/\{\=(\w+)\}/g,function($0,$1){return json[$1]||'';});}var pages = '';(!+ops.per || ops.per < 1) && (ops.per = 5);if (!+ops.total || ops.total <= ops.per )return pages;//只有一頁ops.maxp = Math.ceil(ops.total/ops.per);//最大頁 //得到當前頁碼與偏移if (ops.count > 0) {//使用條數方式ops.count > ops.total && (ops.count = ops.total); ops.page = Math.ceil(ops.count/ops.per);//數據位移轉換成頁,余+1} else if (ops.page > 1){//頁碼式ops.page > ops.maxp && (ops.page = ops.maxp);ops.count = ops.page*ops.per;} else {ops.count = 0;ops.page = 1;}ops.nums = ops.side*2+1;//總數字頁為*2+1 console.log(ops);//首頁/上頁,左邊頁面碼,page>side出現if (ops.page > ops.side+1)pages += parseTPL(ops.firstTPL,{page:1})+ parseTPL(ops.prevTPL,{page:ops.page-1});//快退:var prevp = ops.page - ops.nums;if (prevp > 1 )pages += parseTPL(ops.prevSideTPL,{page:prevp});//中間左邊/右邊的頁碼for (var fi = ops.side, sidel=sider='',pl=pr=ops.page;fi >0; fi--) { //左邊頁面碼if (--pl >= 1)sidel = parseTPL(ops.numberTPL,{page:pl}) + sidel; //右邊頁碼if (++pr <= ops.maxp)sider += parseTPL(ops.numberTPL,{page:pr}); }pages += sidel + parseTPL(ops.pageTPL,{page:ops.page})+ sider;//快進按鈕var nextp = ops.page + ops.nums;if (ops.maxp > nextp )pages += parseTPL(ops.nextSideTPL,nextp); //最后的按鈕if (ops.maxp- ops.page > ops.side)pages += parseTPL(ops.nextTPL,{page:ops.page+1}) +parseTPL(ops.lastTPL,{page:ops.maxp});//跳轉if (ops.page > ops.side || ops.maxp-ops.page >ops.side)pages += parseTPL(ops.jumpTPL,{page:ops.page});return pages;} });

使用方法

seajs見seajs.org

或者改寫成普通的插件

seajs.use('chrd/page/1.0/page.js#?kdkddddddgdkk',function(p){page = p({total:1000,page:25});console.log(page);}) Object?{total:?1000,?page:?25,?count:?125,?side:?5,?per:?5…} page.js:55 <a href="?1">首頁</a><a href="?24">上頁</a><a href="?14">&lt;&lt;</a><a href="?20">20</a><a href="?21">21</a><a href="?22">22</a><a href="?23">23</a><a href="?24">24</a><a href="#25">25</a><a href="?26">26</a><a href="?27">27</a><a href="?28">28</a><a href="?29">29</a><a href="?30">30</a><a href="?">&gt;&gt;</a><a href="?26">下頁</a><a href="?200">末頁</a>

總結

以上是生活随笔為你收集整理的js分页插件:首页,上页,快退,页码,快进,下页末页,跳转,使用模板,灵活自由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。