一款可以设置列表数量的jQuery分页控件代码,可以自由设置列表显示的数量,可以跳转到指定数字的页面,点击左右箭头可以切换到不同的列表页面,按钮样式等均可以自由调整。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791