效果链接http://love.bjxxw.com/oejiaoyou/pubu/zhaopian.php
php 分页
<?php /* * * * 说明 吉海波 2015/9/17 * $pageSize=6;//每页显示 $page=$_GET['page'];//接收当前页 * //接收不到,就是第1页 if($page==""){ $page=1; } $showPage=5;//分页条中间 显示几个页的按钮 //得到数据总数 $total_sql="SELECT COUNT(*) FROM `oepre_user_photo`"; $total_result=mysql_fetch_array(mysql_query($total_sql)); $total= $total_result[0]; * $page_type是按钮样式 颜色有:皇军蓝色.blue,深天蓝色.DeepSkyBlue,粉色.pink ,灰色.gray,白色.white * $page_type是按钮样式 类型有:圆形边框.rborder ,灰色边框.cborder,无边框.noborder,阴影边框3灰.shborder3,阴影边框2.shborder2,阴影边框1.shborder1, * 调用方法 <?php fenye($pageSize,$page,$showPage,$total,"blue rborder cborder shborder2") ?> * */ function fenye($pageSize,$page,$showPage,$total,$page_type){ //计算页数总数 $total_pages=ceil($total/$pageSize); //分页条使用初始化 $page_banner=""; //计算偏移量 $pageoffset=($showPage-1)/2; //初始化数据 $start=1; $end=$total_pages; //判断页码了 //没有这页 if($page > $total_pages || $page < 1 ){ echo ' <script> alert("没有这页哦"); history.back(); </script>'; } //首页,上一页 if( $page > 1){ $page_banner= "<a href=".$_SERVER['PHP_SELF']."?page=1>首页</a>"; $page_banner.= "<a href=".$_SERVER['PHP_SELF']."?page=".($page-1).">上一页</a>"; } if($total_pages>$showPage){ //首部省略号 if($page > $pageoffset + 1){ $page_banner.="..."; } //思维区 if($page>$pageoffset){ $start=$page - $pageoffset; $end=$total_pages > $page + $pageoffset ? $page + $pageoffset : $total_pages; }else{ $start=1; $end=$total_pages > $showPage ? $showPage : $total_pages; } if($page + $pageoffset > $total_pages){ $start=$start - ($page + $pageoffset - $end); } } //中间页数按钮 for($j = $start; $j <= $end; $j++){ //当前页按钮样式 if($page == $j){ $page_banner.="<span class='visit_page middle_page'>{$j}</span>"; }else{ $page_banner.= "<a class='middle_page' href=".$_SERVER['PHP_SELF']."?page=".($j).">{$j}</a>"; } } //尾部省略号 if($total_pages > $showPage && $total_pages > $page + $pageoffset){ $page_banner.="..."; } //尾页,下一页 if($page < $total_pages){ $page_banner.= "<a href=".$_SERVER['PHP_SELF']."?page=".($page+1).">下一页</a>"; $page_banner.="<a href=".$_SERVER['PHP_SELF']."?page=".($total_pages).">尾页</a>"; } //总共页数 $page_banner.="<span class='all_page' >共<span id='all_page'>{$total_pages}</span>页</span>"; //页面跳转 $page_banner.='<form action="" method="get" class="page_form" name="page_form">'; $page_banner.='到第<input type="text" value="'.($page+1).'" name="page" id="page_value" oninput="page_on()" onpropertychange="page_on()">'; $page_banner.='<input type="submit" value="确定" class="page_sure" name="page_sure" id="page_sure">'; $page_banner.='</form>'; //输出页码条 echo "<span class='".$page_type." type_fix'>".$page_banner."</span>"; //最后一页 if($page == $total_pages){ echo ' <script> document.getElementById("page_value").value="1"; </script>'; } //检测跳转页码是否乱输入 echo ' <script> function page_on(){ var page_value=document.getElementById("page_value").value; var all_page=document.getElementById("all_page").innerHTML; var page_sure = document.getElementById("page_sure"); if((page_value*1 <= all_page*1 ) && ( page_value*1 > 0) ){ document.page_form.page_sure.disabled=""; page_sure.style.backgroundColor=""; }else{ document.page_form.page_sure.disabled=true; page_sure.style.backgroundColor="#AAAAAA"; } } </script> '; } ?>
css
/*** * 颜色有:皇军蓝色.blue,深天蓝色.DeepSkyBlue,粉色.pink ,灰色.gray,白色.white * 类型有:圆形边框.rborder ,灰色边框.cborder,无边框.noborder,阴影边框3灰.shborder3,阴影边框2.shborder2,阴影边框1.shborder1, * ***************基本**************************************/ .type_fix{ display:block; line-height:30px; height: 30px; width:100%; text-align:center; margin:0 auto; padding-bottom: 55px; font-size: 14px; font-family: Cambria, Georgia, serif; } .type_fix .page_form{ display: inline; } .type_fix a,.type_fix .all_page,.type_fix input{ margin: 5px; padding: 4px 4px; border: #CCCCCC 1px solid; text-decoration:none; background: none; } .type_fix .page_sure{ cursor: pointer; } .type_fix .middle_page{ padding: 4px 6px; } .type_fix #page_value{ width: 20px; } .type_fix .page_form{ margin-left: 16px; } /******************颜色**************************************/ /*皇军蓝色*/ .blue a, .blue .all_page, .blue input{ border: #4F63E3 1px solid; color: #4F63E3; } .blue{ color: #4F63E3; } .blue a:hover, .blue .visit_page{ background: #4F63E3; color:#FFFFFF; border: #4F63E3 1px solid; } /*深天蓝色*/ .DeepSkyBlue a, .DeepSkyBlue .all_page, .DeepSkyBlue input{ border: #35BFFF 1px solid; color: #35BFFF; } .DeepSkyBlue { color: #35BFFF; } .DeepSkyBlue a:hover, .DeepSkyBlue .visit_page{ background: #35BFFF; color:#FFFFFF; border: #35BFFF 1px solid; } /*粉色*/ .pink a, .pink .all_page, .pink input{ border: #F15481 1px solid; color: #F15481; } .pink { color: #F15481; } .pink a:hover, .pink .visit_page{ background: #F15481; color:#FFFFFF; border: #F15481 1px solid; } /*灰色*/ .gray a, .gray .all_page, .gray input{ border: #808080 1px solid; color: #808080; } .gray { color: #808080; } .gray a:hover, .gray .visit_page{ background: #808080; color:#FFFFFF; border: #808080 1px solid; } /*白色*/ .white a, .white .all_page, .white input{ border: #FFFFFF 1px solid; color: #FFFFFF; } .white { color: #FFFFFF; } .white a:hover, .white .visit_page{ background: #FFFFFF; color:#000000; border: #FFFFFF 1px solid; } /******************边框**************************************/ /*无边框*/ .noborder a, .noborder .all_page, .noborder input{ border:none; } .noborder a:hover, .noborder .visit_page{ background: none; color: #000000; border:none; } /*灰色边框*/ .cborder a, .cborder .all_page, .cborder input, .cborder a:hover, .cborder .visit_page{ border: #CCCCCC 1px solid; } /*圆形边框*/ .rborder a, .rborder .all_page, .rborder input, .rborder a:hover, .rborder .visit_page{ border-radius: 4px; } /*阴影边框1斜着*/ .shborder1 a, .shborder1 .all_page, .shborder1 input, .shborder1 a:hover, .shborder1 .visit_page{ -moz-box-shadow:2px 2px 5px #969696;/*firefox*/ -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/ box-shadow:2px 2px 5px #969696;/*opera或ie9*/ } /*阴影边框2原色*/ .shborder2 a, .shborder2 .all_page, .shborder2 input, .shborder2 a:hover, .shborder2 .visit_page{ -webkit-box-shadow:0 0 10px ; -moz-box-shadow:0 0 10px; box-shadow:0 0 10px ; } /*阴影边框3灰*/ .shborder3 a, .shborder3 .all_page, .shborder3 input, .shborder3 a:hover, .shborder3 .visit_page{ -webkit-box-shadow:0 1px 3px rgba(34,25,25,0.4); -moz-box-shadow:0 1px 3px rgba(34,25,25,0.4); box-shadow:0 1px 3px rgba(34,25,25,0.4); } /******************hack**************************************/ /*IE6 & IE7:hack*/ a:focus,*:focus { noFocusLine: expression(this.onFocus=this.blur()); outline:none;} *.type_fix *#page_value{ display: inline-block; margin-bottom: -4px; } *.type_fix *.page_sure{ line-height: 16px; height: 26px; display: inline-block; margin-bottom: -4px; filter:chroma(color=#000000); } /*火狐hack*/ @-moz-document url-prefix(){ .type_fix .page_sure{ padding: 2px; } }
php 调用页
<?php include("conf/database.php"); $pageSize=35;//每页显示 $page=$_GET['page'];//接收第几页 //接收不到,就是第1页 if($page==""){ $page=1; } $showPage=5;//分页条中间 显示几个页的按钮 //得到数据总数 $total_sql="SELECT COUNT(*) FROM `oepre_user_photo`"; $total_result=mysql_fetch_array(mysql_query($total_sql)); $total= $total_result[0]; include("fenye.php"); $page_point=(($page-1)*$pageSize);//分页开始点 ?> <?php fenye($pageSize,$page,$showPage,$total,'DeepSkyBlue shborder3 noborder') ?>