js分页插件:首页,上页,快退,页码,快进,下页末页,跳转,使用模板,灵活自由

//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"><<</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="?">>></a><a href="?26">下页</a><a href="?200">末页</a>