js分页插件

这是我2016年写的一个分页功能,直接贴上来的。那时候代码格式写的也不规范。

/**
 * [setPaging 分页]
 * @param {String} linkList [HTML中分页组件区域,DIV DOM元素]
 * @param {JSON:{page::1, totalPages:99, perPage:10, eachPageLinks:10}} data   [分页所需数据]
 * totalPages:总页数,page:当前页,perPage:每页条目,eachPageLinks:显示几个分页按钮
 */
function setPaging(linkList, data){
	linkList.empty();//清空原来的分页按钮
	//显示“首页”按钮
	addLink(linkList,1,data.perPage,"首页");
	//当前页面不是第一页时显示“上一页”按钮
	if(data.page>1){
		addLink(linkList,data.page-1,data.perPage,"上一页");
	};
	//总页面不足每页显示的最大链接数时,有几页就只显示几页连接按钮
	if( data.eachPageLinks>=data.totalPages ){
		for(var i=1; i<=data.totalPages; i++){
			addLinkItem(i, linkList, data.totalPages, data.page, data.perPage);
		};
	}
	//当前页面在分页按钮中居中显示(左,靠近第一页时)
	else if( data.page<data.eachPageLinks/2+1 ){
		for(var i=1; i<=data.eachPageLinks; i++){
			addLinkItem(i, linkList, data.totalPages, data.page, data.perPage);
		};
	}
	//当前页面在分页按钮中居中显示(右,靠近最后一页时)
	else if(data.page>=data.totalPages-Math.floor(data.eachPageLinks/2)){
		var temp=data.totalPages-data.eachPageLinks+1;
		addLinkTemp(temp, linkList, data.eachPageLinks, data.page, data.perPage);
	}
	//当前页面在分页链接中居中显示(中,页面比较多且当前页面不靠近首页和尾页)
	else{
		var temp=data.page-Math.floor(data.eachPageLinks/2);
		addLinkTemp(temp, linkList, data.eachPageLinks, data.page, data.perPage);
	}
	//当前页面不是最后一页时显示“下一页”按钮
	if(data.page<data.totalPages){
		addLink(linkList,data.page+1,data.perPage,"下一页");
	};
	//显示“尾页”按钮
	addLink(linkList,data.totalPages,data.perPage,"尾页");	


	//------插入分页按钮:结束------


	//添加链接,方法(main)
	function addLink(linkList,linkPage,perPage,value){
		var oA='<a href="?page='+linkPage+'&perPage='+perPage+'" onclick="return beforeJump(this)">'+value+'</a>';
		var oLi='<li>'+oA+'</li>';
		linkList.append(oLi);
	};
	//添加链接,方法(1)
	function addLinkItem(item, linkList, totalPages, page, perPage){
		if(totalPages==1){
			var oLi='<li>第 1 页</li>';
			linkList.append(oLi);
		}else if(item==page){
			var oLi='<li>'+''+item+'</li>';
			linkList.append(oLi);
		}else{
			addLink(linkList,item,perPage,item);
		};
	};
	//添加链接,方法(2)
	function addLinkTemp(temp, linkList, eachPageLinks, page, perPage){
		for(var k=0; k<eachPageLinks; k++){
			if(temp==page){
				var oLi='<li>'+''+temp+'</li>';
				temp++;
				linkList.append(oLi);
			}else{
				addLink(linkList,temp,perPage,temp++);
			};
		};
	};
};
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值