<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.shaxiangift.com/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.sxdscyy.com/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQuery带分页搜索跳转功能代码</title>
<style>
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>
<scriptsrc="js/jquery-1.8.1.js"></script>
</head>
<body>
<div style="width: 100%;">
<divclass="pageListTab">
<divclass="pageLt" id="pageLt">
<span>条数显示</span>
<ahref="javascript:;">10</a>
<ahref="javascript:;">20</a>
<ahref="javascript:;">30</a>
<ahref="javascript:;">40</a>
</div>
<divclass="pageRt">
<span>共<em id="count">0</em>条</span>
<ahref="javascript:;" class="down_page"><</a>
<ahref="javascript:;" class="active"id="nowPage">1</a>
<ahref="javascript:;" class="up_page">></a>
<inputtype="text" id="pageNum" name="pageNum">
<spanid="allPage">/1页</span>
<ahref="javascript:;" class="jump_page">跳转</a>
</div>
</div>
</div>
<script>
varpage = 1;
varlimit = 10;
varsumPage = 6;
varsize = 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
});
});
functionloadClass(){
if(limit== 10){
$("#pageLt").find("a").removeClass("active");
$("#pageLt").find("a").eq(0).addClass("active");
}elseif(limit == 20){
$("#pageLt").find("a").removeClass("active");
$("#pageLt").find("a").eq(1).addClass("active");
}elseif(limit == 30){
$("#pageLt").find("a").removeClass("active");
$("#pageLt").find("a").eq(2).addClass("active");
}elseif(limit == 40){
$("#pageLt").find("a").removeClass("active");
$("#pageLt").find("a").eq(3).addClass("active");
}
}
/**初始化分页控件 **/
functioninitPage(){
$(".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(){
varpageNum = $("#pageNum").val();
if(parseInt(pageNum)<= parseInt(sumPage)){
page= parseInt(pageNum);
$("#nowPage").text(page);
//分页执行的fun
}else{
alert("页数不能大于总页数","warning");
}
});
}
functionsetPageMsg(){
$("#count").text(size);
$("#nowPage").text(page);
$("#allPage").text(""+sumPage+"页");
}
</script>
<div style="text-align:center;margin:50px0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://down.admin5.com/"target="_blank"> </a></p>
</div>
</body>
</html>
联系客服
