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">&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>