多功能实用的JS分页插件

一款多功能实用的JS分页插件，有两种方式实现分页效果，演示页面已经跟出了示范了，分页的样式等可以自由调整的，喜欢的童鞋请收下吧。

分类：html/css > 按钮难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入JS插件和必要的CSS样式，并简单设置演示页面的样式，代码如下：

<script type="text/javascript" src='src/pagination.js'></script>
<link type="text/css" rel="stylesheet" href="src/page.css">
<style type="text/css">
body{
	font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
.page{
	width:1000px;
	margin:0 auto;
	overflow: hidden;
}
#d4,#d3{
	height:400px;
	width:500px;
	float:left;
	border:1px solid #efefef;
	box-sizing:border-box;
}
h3{
	text-align: center;
}
pre i{
	color:#999;
}
</style>

页面的body部分，用了div容器的嵌套，结构不算复杂，代码如下：

<div class='page'>
	<div id='d3'>
		<h3>a 链接跳转实现分页效果</h3>
<pre>
	page({
		box:'d1',//存放分页的容器
		href:'www.scopeman.cn/detail.html?page=',//跳转连接
		page:8,//当前页码 
		count:15,//总页数
		num:5,//页面展示的页码个数
	})
</pre>
		<div id='d1'></div>
		展示多少页码：
		<input type="text" style='outline:none;border:1px solid #ddd;width:50px;height:28px;line-height:28px;border-radius:3px;padding:0 6px;' value='' id='n'><br>
		这里模式后传过来的总页数：
		<input type="text" style='outline:none;border:1px solid #ddd;width:50px;height:28px;line-height:28px;border-radius:3px;padding:0 6px;' value='' id='m'><br>
		这里模拟后端传过来的页码：
		<input type="text" style='outline:none;border:1px solid #ddd;width:50px;height:28px;line-height:28px;border-radius:3px;padding:0 6px;' value='' id='id'><br>
		<input type="button" style='outline:none;border:1px solid #0099ff;width:80px;height:32px;line-height:32px;border-radius:3px;font-size: 15px;background:#0099ff;color:#fff;' id='on' value='试一试'>
	</div>
	<div id='d4'>
	<h3>Ajax 实现分页效果</h3>
<pre>
	page({
		box:'d2',//存放分页的容器
		count:32,//总页数
		num:8,//页面展示的页码个数
		step:6,//每次更新页码个数
		callBack:function(i){
			//点击页码的按钮发生回调函数一般都是操作ajax
		}
	})
	<h4 style='text-align:center;margin:0'>注意：num 要比step要大于等于2
	（例如:num：8；那么step只能小于等于6）</h4>
</pre>
		<div id='d2'></div>
		<div id='dd'></div>
		<div id='dt'></div>
	</div>
</div>
<div style='width:1000px;margin:10px auto'>
	<h2>可根据您的需求自定义样式：</h2>
	我们的dom结构为<br>
	<pre style='background:#000;color:#F92672;padding:10px;line-height:28px'>
		div class='page-contain'<i>//最外层容器</i>
			a href="" class='page-pre'>/a<i>//上箭头</i>
			div class='page-box'><i>//页码器</i>
				a href="">/a<i>//页码</i>
				.......
			/div
			a href="" class='page-next'/a<i>//下箭头</i>
		/div
		<i>//根据上面的dom结构和class 我们很方便制定我需求的样式</i>
		<i>//激活状态下我们对应的页码会添加active的class</i>
	</pre>
</div>

页面的底部，需启用插件并设置好相应的参数，代码如下：

<script type="text/javascript">
page({
	box:'d1',//存放分页的容器
	href:'#?page=',//跳转连接
	page:10,//当前页码 
	count:30,//总页数
	num:5,//页面展示的页码个数
})
document.getElementById('on').addEventListener('click',function(){
	var n = Number(document.getElementById('n').value);
	var m = Number(document.getElementById('m').value);
	var id = Number(document.getElementById('id').value);
	if(m<id){alert('当前页不能大于总页数')}
	else{
		page({
			box:'d1',//存放分页的容器
			href:'#?page=',//跳转连接
			page:id,//当前页码 
			count:m,//总页数
			num:n,//页面展示的页码个数
		})
	}	
})
page({
	box:'d2',//存放分页的容器
	count:20,//总页数
	num:9,//页面展示的页码个数
	step:6,//每次更新页码个数
	callBack:function(i){
		console.log(i);
		//点击页码的按钮发生回调函数一般都是操作ajax
	}
})
page({
	box:'dd',//存放分页的容器
	count:20,//总页数
	num:6,//页面展示的页码个数
	step:4,//每次更新页码个数
	callBack:function(i){
		console.log(i);
		//点击页码的按钮发生回调函数一般都是操作ajax
	}
})
page({
	box:'dt',//存放分页的容器
	count:22,//总页数
	num:5,//页面展示的页码个数
	step:3,//每次更新页码个数
	callBack:function(i){
		console.log(i);
		//点击页码的按钮发生回调函数一般都是操作ajax
	}
})
</script>