可以设置列表数量的jQuery分页控件代码

一款可以设置列表数量的jQuery分页控件代码，可以自由设置列表显示的数量，可以跳转到指定数字的页面，点击左右箭头可以切换到不同的列表页面，按钮样式等均可以自由调整。

分类：其它特效 > jQuery插件难易：初级

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

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入jQuery库，设置好页面元素的样式，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
a{text-decoration:none;outline:none;border:none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color:transparent;color:#303030; font-size:14px;}
.pageListTab{overflow:hidden; margin:20px 0;}
.pageListTab .pageLt{float:left; font-size:12px;}
.pageListTab .pageLt span{display:inline-block;}
.pageListTab .pageLt a{display:inline-block; border:1px solid #ddd; background:#fff; width:30px; height:30px; line-height:30px; text-align:center; font-size:12px; margin:0 5px;}
.pageListTab .pageRt{float:right; font-size:12px; text-align:right; margin-top:3px;}	
.pageListTab .pageRt a{display:inline-block; border:1px solid #ddd; background:#fff; padding:0 10px; height:24px; line-height:24px; text-align:center; font-size:12px; margin:0 5px;}
.pageListTab .pageRt input{border:1px solid #ddd; height:24px; line-height:24px; width:45px; text-align:center;}
.pageListTab .pageLt .active{background:#44B549; border:1px solid #44B549; color:#fff;}	
.pageListTab .pageRt .active{background:#44B549; border:1px solid #44B549; color:#fff;}	
</style>

页面的body部分，设置好列表数量、分页按钮等的容器，代码如下：

<div style="width: 100%;">
	<div class="pageListTab">
		<div class="pageLt" id="pageLt">
			<span>条数显示</span>
			<a href="javascript:;">10</a>
			<a href="javascript:;">20</a>
			<a href="javascript:;">30</a>
			<a href="javascript:;">40</a>
		</div>
		<div class="pageRt">
			<span>共<em id="count">0</em>条</span>
			<a href="javascript:;" class="down_page"><</a>
			<a href="javascript:;" class="active" id="nowPage">1</a>
			<a href="javascript:;" class="up_page">></a>
			<input type="text" id="pageNum" name="pageNum"/>
			<span id="allPage">/1页</span>
			<a href="javascript:;" class="jump_page">跳转</a>
		</div>
	</div>
</div>

页面的底部，对分页插件的相关参数等进行设置，代码如下：

<script type="text/javascript">
var page = 1;
var limit = 10;
var sumPage = 6;
var size = 28;
$(function(){
	page = parseInt(page);
	limit = parseInt(limit);  //防止页码出现字符串，转换类型
	
	loadClass();
	setPageMsg();
	initPage();
	
	$("#pageLt").find("a").unbind("click").click(function(){
		$("#pageLt").find("a").removeClass("active");
		$(this).addClass("active");
		
		limit = parseInt($(this).text());
		// 分页执行的fun
	});
});

function loadClass(){
	
	if(limit == 10){
		$("#pageLt").find("a").removeClass("active");
		$("#pageLt").find("a").eq(0).addClass("active");
	}else if(limit == 20){
		$("#pageLt").find("a").removeClass("active");
		$("#pageLt").find("a").eq(1).addClass("active");
	}else if(limit == 30){
		$("#pageLt").find("a").removeClass("active");
		$("#pageLt").find("a").eq(2).addClass("active");
	}else if(limit == 40){
		$("#pageLt").find("a").removeClass("active");
		$("#pageLt").find("a").eq(3).addClass("active");
	}
}

/** 初始化分页控件 **/
function initPage(){
	
	$(".down_page").click(function(){  //上一页
		if(page != 1){
			page = page - 1;
			$("#nowPage").text(page);
			// 分页执行的fun
		}else{
			alert("已经是第一页了","warning");
		}
	});
	$(".up_page").click(function(){   //下一页
		if(page < parseInt(sumPage)){
			page = page + 1;
			$("#nowPage").text(page);
			// 分页执行的fun
		}else{
			alert("已经是最后一页了","warning");
		}
	});
	$(".jump_page").click(function(){
		var pageNum = $("#pageNum").val();
		if(parseInt(pageNum) <= parseInt(sumPage)){
			page = parseInt(pageNum);
			$("#nowPage").text(page);
			// 分页执行的fun
		}else{
			alert("页数不能大于总页数","warning");
		}
	});
}

function setPageMsg(){
	$("#count").text(size);
	$("#nowPage").text(page);
	$("#allPage").text("/"+sumPage+"页");
} 
</script>