首页 > 代码库 > js/jquery 页面分页（看别人写的看不懂，自己写了一个---仅基础知识） 另自己倒一个jquery的.jar包即可使用
js/jquery 页面分页（看别人写的看不懂，自己写了一个---仅基础知识） 另自己倒一个jquery的.jar包即可使用
<!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" />
<script language="javascript" src="http://www.mamicode.com/js/jquery-1.8.2.min.js"></script>
<title>页面分页</title>
<style>
.page{
text-align: center;
margin-top: 50px;
}
.page a{
text-decoration: none;
border: 1px solid #999999;
padding: 5px 7px;
color: #999999;
cursor: pointer;
font-size: 16px;
letter-spacing: 0.66px;
}
.page a:hover{
color: #333333; }
#content_show{
text-align: center;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="content" style="display:none">
<div class="news">1</div>
<div class="news">2</div>
<div class="news">3</div>
<div class="news">4</div>
<div class="news">5</div>
<div class="news">6</div>
<div class="news">7</div>
<div class="news">8</div>
<div class="news">9</div>
<div class="news">10</div>
<div class="news">11</div>
<div class="news">12</div>
<div class="news">13</div>
<div class="news">14</div>
<div class="news">15</div>
<div class="news">16</div>
<div class="news">17</div>
</div>
<div id="content_show">
</div>
<!--分页 -->
<div class="page">
<a>上一页</a>
<a href="http://www.mamicode.com/#">1</a>
<a>下一页</a>
</div>
</body>
<script>
$(function(){
//得到查询内容的长度 .length
var total=$(".news").length;
//设定每页显示条数 item
var item=2;
//计算分页显示的总页数
var pagenum=Math.ceil(total/item);
//设定显示页面分页的页数
var pages=5;
//初始化显示分页
//直接显示 pagenum
$(".page").html("");
$(".page").append(‘<a href="http://www.mamicode.com/#" style="letter-spacing: 0.66px;">上一页</a> ‘);
$(".page").append(‘<span id="point_2">..</span>‘);
for (var i = 0; i < pagenum; i++) {
$(".page").append(‘<a href="http://www.mamicode.com/#">‘+(i+1)+‘</a> ‘);
}
if(pagenum > pages){
$(".page a:eq("+pages+")").nextAll().hide();
$(".page").append(‘<span id="point_3">..</span>‘);
}
$(".page").append(‘<a href="http://www.mamicode.com/#"style="letter-spacing: 0.66px;">下一页</a> ‘);
$("#point_2").hide();
//初始化显示内容
if(item<=total){
for (var i = 0; i < item; i++) {
$("#content_show").append($("#content div.news:eq("+i+")").clone());
}
}else{
for (var i = 0; i <total; i++) {
$("#content_show").append($("#content div.news:eq("+i+")").clone());
}
}
$(".page a:eq(1)").attr("flag","flag");
//下一页
//a,判断是否还有下一页-----得到当前页来判断
var crruntpage;
$("a").click(function(){
//点击下一页出现的当前页
//内容所处页面
$("a").each(function(){
if($(this).attr("flag")=="flag"){
crruntpage=$(this).html();
}
});
if("下一页"==$(this).html()){
if(crruntpage<pagenum){
//下一页有效
//切换内容
$("#content_show").html("");
for (var i =crruntpage*item; i < item*(parseInt(crruntpage)+1); i++) {
$("#content_show").append($("#content div.news:eq("+i+")").clone());
}
jQuery(this).siblings().attr("flag","");
jQuery(".page a:eq("+(parseInt(crruntpage)+1)+")").attr("flag","flag");
jQuery(this).siblings().css("color","#999999");
jQuery(".page a:eq("+(parseInt(crruntpage)+1)+")").css("color","red");
//翻转分页
var max_top=0;
var min_top=pagenum;
$("a").each(function(){
if($(this).attr("style").indexOf("none")>0){
if($(this).html()<crruntpage){
if($(this).html()>max_top){
max_top=$(this).html();
}
}
if($(this).html()>crruntpage){
if($(this).html()<min_top){
min_top=$(this).html();
}
}
}
});
$("#point_2").show();
if((parseInt(max_top)+parseInt(pages))<pagenum){
$(".page a:eq("+(parseInt(max_top)+1)+")").hide();
}
if((parseInt(max_top)+parseInt(pages))>=pagenum-1){
$("#point_3").hide();
}
$(".page a:eq("+(parseInt(min_top))+")").show();
/**
BUG
if((parseInt(crruntpage)+parseInt(pages))<=pagenum)
{
$(".page a:eq("+crruntpage+")").hide();
$(".page a:eq("+(parseInt(crruntpage)+parseInt(pages))+")").show();
}
if((parseInt(crruntpage)+parseInt(pages))==pagenum){
$("#point_3").hide();
$("#point_2").show();
}
**/
// crruntpage=parseInt(crruntpage)+1;
}
}
else if("上一页"==$(this).html()){
//当前页大于1有效
//切换内容
if(crruntpage>1){
$("#content_show").html("");
for (var i =(parseInt(crruntpage)-2)*item; i < item*(crruntpage-1); i++) {
$("#content_show").append($("#content div.news:eq("+i+")").clone());
}
jQuery(this).siblings().attr("flag","");
jQuery(".page a:eq("+(parseInt(crruntpage)-1)+")").attr("flag","flag");
jQuery(this).siblings().css("color","#999999");
jQuery(".page a:eq("+(parseInt(crruntpage)-1)+")").css("color","red");
//翻转分页
var max=0;
var min=pagenum;
$("a").each(function(){
if($(this).attr("style").indexOf("none")>0){
if($(this).html()<crruntpage){
if($(this).html()>max){
max=$(this).html();
}
}
if($(this).html()>crruntpage){
if($(this).html()<min){
min=$(this).html();
}
}else{
min=pagenum+1;
}
}
});
$("#point_3").show();
$(".page a:eq("+(parseInt(max))+")").show();
if(min-pages>1){
$(".page a:eq("+(parseInt(min)-1)+")").hide();
}
if(min-pages<=2){
$("#point_2").hide();
}
/**
BUG
if((parseInt(crruntpage)-parseInt(pages))>0)
{
$(".page a:eq("+crruntpage+")").hide();
$(".page a:eq("+(parseInt(crruntpage)-parseInt(pages))+")").show();
}
if((parseInt(crruntpage)-parseInt(pages))==1){
$("#point_2").hide();
$("#point_3").show();
}
**/
}
}
else{
//点击页数
$("#content_show").html("");
for (var i = (jQuery(this).html()-1)*item; i < item*jQuery(this).html(); i++) {
$("#content_show").append($("#content div.news:eq("+i+")").clone());
}
jQuery(this).siblings().attr("flag","");
$(this).attr("flag","flag");
jQuery(this).siblings().css("color","#999999");
$(this).css("color","red");
}
if(pages>=pagenum){
$("#point_3").hide();
$("#point_2").hide();
}
})
})
</script>
</html>
js/jquery 页面分页（看别人写的看不懂，自己写了一个---仅基础知识） 另自己倒一个jquery的.jar包即可使用