jQuery根据总页数进行分页操作代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery根据总页数进行分页操作代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery根据总页数进行分页操作代码</title>
<!--可无视-->
<link rel="stylesheet" type="text/css" href="base.css"/>
<!--主要样式-->
<link rel="stylesheet" type="text/css" href="pageGroup.css"/>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="pageGroup.js"></script>

</head>

<body>
<!-------------------------------------------分页----------------------------------------------------------------->
<div id="pageGro" class="cb" style="margin-top:100px;">
	<div class="pageUp">上一页</div>
    <div class="pageList">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <div class="pageDown">下一页</div>
</div>
</body>
</html>

JS代码(pageGroup.js):

// JavaScript Document$(function(){
	//根据总页数判断，如果小于5页，则显示所有页数，如果大于5页，则显示5页。根据当前点击的页数生成var pageCount = 11;
	//模拟后台总页数//生成分页按钮if(pageCount>5){
	page_icon(1,5,0);
}
else{
	page_icon(1,pageCount,0);
}
//点击分页按钮触发$("#pageGro li").live("click",function(){
	if(pageCount > 5){
	var pageNum = parseInt($(this).html());
	//获取当前页数pageGroup(pageNum,pageCount);
}
else{
	$(this).addClass("on");
	$(this).siblings("li").removeClass("on");
}
}
);
	//点击上一页触发$("#pageGro .pageUp").click(function(){
	if(pageCount > 5){
	var pageNum = parseInt($("#pageGro li.on").html());
	//获取当前页pageUp(pageNum,pageCount);
}
else{
	var index = $("#pageGro ul li.on").index();
	//获取当前页if(index > 0){
	$("#pageGro li").removeClass("on");
	//清除所有选中$("#pageGro ul li").eq(index-1).addClass("on");
	//选中上一页}
}
}
);
	//点击下一页触发$("#pageGro .pageDown").click(function(){
	if(pageCount > 5){
	var pageNum = parseInt($("#pageGro li.on").html());
	//获取当前页pageDown(pageNum,pageCount);
}
else{
	var index = $("#pageGro ul li.on").index();
	//获取当前页if(index+1 < pageCount){
	$("#pageGro li").removeClass("on");
	//清除所有选中$("#pageGro ul li").eq(index+1).addClass("on");
	//选中上一页}
}
}
);
}
);
	//点击跳转页面function pageGroup(pageNum,pageCount){
	switch(pageNum){
	case 1:page_icon(1,5,0);
	break;
	case 2:page_icon(1,5,1);
	break;
	case pageCount-1:page_icon(pageCount-4,pageCount,3);
	break;
	case pageCount:page_icon(pageCount-4,pageCount,4);
	break;
	default:page_icon(pageNum-2,pageNum+2,2);
	break;
}
}
//根据当前选中页生成页面点击按钮function page_icon(page,count,eq){
	var ul_html = "";
	for(var i=page;
	i<=count;
	i++){
	ul_html += "<li>"+i+"</li>";
}
$("#pageGro ul").html(ul_html);
	$("#pageGro ul li").eq(eq).addClass("on");
}
//上一页function pageUp(pageNum,pageCount){
	switch(pageNum){
	case 1:break;
	case 2:page_icon(1,5,0);
	break;
	case pageCount-1:page_icon(pageCount-4,pageCount,2);
	break;
	case pageCount:page_icon(pageCount-4,pageCount,3);
	break;
	default:page_icon(pageNum-2,pageNum+2,1);
	break;
}
}
//下一页function pageDown(pageNum,pageCount){
	switch(pageNum){
	case 1:page_icon(1,5,1);
	break;
	case 2:page_icon(1,5,2);
	break;
	case pageCount-1:page_icon(pageCount-4,pageCount,4);
	break;
	case pageCount:break;
	default:page_icon(pageNum-2,pageNum+2,3);
	break;
}
}

CSS代码(pageGroup.css):

/* CSS Document */
/*分页*/
#pageGro{width:400px;height:25px;margin:0px auto;padding-top:30px;}
#pageGro div,#pageGro div ul li{font-size:12px;color:#999;line-height:23px;float:left;margin-left:5px;}
#pageGro div ul li{width:22px;text-align:center;border:1px solid #999;cursor:pointer;}
#pageGro div ul li.on{color:#fff;background:#3c90d9;border:1px solid #3c90d9;}
#pageGro .pageUp,#pageGro .pageDown{width:63px;border:1px solid #999;cursor:pointer;}
#pageGro .pageUp{text-indent:23px;background:url(images/pageUp.png) 5px 7px no-repeat;}
#pageGro .pageDown{text-indent:5px;background:url(images/pageDown.png) 46px 6px no-repeat;}

附件:下载该文件资源,减少时间成本(增值服务)