一种分页的实现
以下代码是一种分页的实现。分别是文件page.php和page.css。
分页的纠结点在于分页条中省略号的显示。
实现的基本逻辑是:
1,接收浏览器端传过来的想要显示的页码数 $page。
$page = $_GET['p']。
2,根据页码数 $page 以及固定的每页显示数 $pageSize 从数据库中取数据。
$sql = "SELECT * FROM books LIMIT ".(($page-1)*$pageSize).",10";
3,填充表格。
4,页码条头部显示。
5,页码条中间页码开始$atart及结束$end的具体求值。
$showPage = 5; 为最大显示页码数
$offset = ($showPage-1)/2; 为偏移量
$sql = 'SELECT count(*) FROM books';
$totalPage 为总的显示页码数
(1)当$totalPage <= $showPage时,1~1+$totalPage。
(2)当$totalPage > $showPage时,
1~(1+$showPage)
或者 ($page-offset)~($page+$offset+1)
或者($totalPage-$showPage+1)~($totalPage+1)
6,根据 5 中得到的$start和$end显示中间的页码数。
7,6 的同时,还要加上相应的省略号。
(1)$start > 1 时,前加省略号。
(2)$end <= $totalPage 时,后加省略号。
8,跳转的设置。用form表单的方式。
9,相关样式的设置。
page.php
1 <html> 2 <head> 3 <meta http-equiv="Content-type" content="text/html;charset=utf-8"> 4 <link href="page.css" rel="stylesheet" type="text/css" /> 5 </head> 6 <body> 7 <?php 8 //1传入页码 9 $page = $_GET['p']; 10 $pageSize = 10;//每页最多显示项目数目 11 //2根据页码提取数据,配置mysql 12 $host = 'localhost'; 13 $username = 'root'; 14 $password = ''; 15 $db = 'bookstore'; 16 $conn = mysql_connect($host, $username, $password); 17 if(!$conn){ 18 echo '数据库连接失败'; 19 exit; 20 } 21 mysql_select_db($db); 22 mysql_query('SET NAMES UTF8'); 23 //3取出数据并生成表格 24 $sql = "SELECT * FROM books LIMIT ".(($page-1)*$pageSize).",$pageSize"; 25 $res = mysql_query($sql); 26 echo "<div class='content'>"; 27 echo '<table border=1 cellspacing=0 width=40%>'; 28 echo '<tr><td>ID</td><td>NAME</td></tr>'; 29 while($row = mysql_fetch_assoc($res)){ 30 echo '<tr>'; 31 echo "<td>{$row['id']}</td>"; 32 echo "<td>{$row['name']}</td>"; 33 echo '</tr>'; 34 } 35 echo '</table></div>'; 36 37 //4分页条参数设置 38 $showPage = 5;//同时最多可以显示页码数量 39 $offset = ($showPage-1)/2;//以当前页码为中心的最多偏移量 40 $sql = 'SELECT count(*) FROM books'; 41 $arr = mysql_fetch_array(mysql_query($sql)); 42 $totalPage = ceil($arr[0]/$pageSize);//可以显示的总页数 43 mysql_free_result($res); 44 mysql_close($conn); 45 $db = 'bookstore'; 46 //5分页条目首部显示 47 $page_banner = "<div class='page'>"; 48 if($page > 1){ 49 $page_banner .= "<a href='".$_SERVER['PHP_SELF']."?p=1'>首页</a>"; 50 $page_banner .= "<a href='".$_SERVER['PHP_SELF']."?p=".($page - 1)."'><上一页</a>"; 51 }else{ 52 $page_banner .= "<span class='display'>首页</span>"; 53 $page_banner .= "<span class='display'><上一页</span>"; 54 } 55 //6分页条目中部显示,先找出开头结尾的页码 56 if($totalPage > $showPage){ 57 //显示部分页码,带了省略号,此处以5页为例 58 if(($page - $offset) <= 1){//显示前5页,后面加省略号 59 $start = 1; 60 $end = $start + $showPage; 61 } elseif (($page + $offset) >= $totalPage) {//显示最后5页,前边加省略号 62 $start = $totalPage - $showPage + 1; 63 $end = $totalPage + 1; 64 } else{//前后都有省略号 65 $start = $page - $offset; 66 $end = $page + $offset + 1; 67 } 68 } else { 69 //显示所有可以显示的页码 70 $start = 1; 71 $end = $start + $totalPage; 72 } 73 if($start > 1){ 74 $page_banner .= '...'; 75 } 76 //7分页条目中部显示,根据页码显示相应 77 for($i = $start; $i < $end; $i++){ 78 if($i == $page){ 79 $page_banner .= "<span class='current'>".($i)."</span>"; 80 }else{ 81 $page_banner .= "<a href='".$_SERVER['PHP_SELF']."?p=".($i)."'>".($i)."</a>"; 82 } 83 } 84 //8分页条目尾部显示,根据页码显示相应 85 if($end <= $totalPage){ 86 $page_banner .= '...'; 87 } 88 if($page < $totalPage){ 89 $page_banner .= "<a href='".$_SERVER['PHP_SELF']."?p=".($page + 1)."'>下一页></a>"; 90 $page_banner .= "<a href='".$_SERVER['PHP_SELF']."?p=".($totalPage)."'>尾页</a>"; 91 }else{ 92 $page_banner .= "<span class='display'>尾页</span>"; 93 $page_banner .= "<span class='display'>下一页></span>"; 94 } 95 //9跳转 96 $page_banner .= "共".$totalPage."页"; 97 $page_banner .= "<form action='page.php' method='get'>"; 98 $page_banner .= "跳转到第<input type='text' size='2' name='p' value='".$page."' />页"; 99 $page_banner .= "<input type='submit' value='确定' />"; 100 $page_banner .= "</form>"; 101 $page_banner .= "</div>"; 102 echo $page_banner; 103 ?> 104 </body> 105 </html>
page.css
1 body{ 2 text-align: center; 3 font-family: verdana; 4 font-size: 12px; 5 width:100%; 6 } 7 table{ 8 margin: 0 auto; 9 text-align:center; 10 } 11 div.page form{ 12 display: inline; 13 } 14 div.content{ 15 height:300px; 16 } 17 div.page a{ 18 border: 1px solid #aaaadd; 19 text-decoration: none; 20 padding: 2px 5px 2px 5px; 21 margin: 2px; 22 } 23 div.page span.current{ 24 border: 1px solid #000099; 25 background-color: #000099; 26 text-decoration: none; 27 padding: 4px 6px 4px 6px; 28 margin: 2px; 29 color: #fff; 30 } 31 div.page span.display{ 32 border: 1px solid #eee; 33 text-decoration: none; 34 padding: 2px 5px 2px 5px; 35 margin: 2px; 36 color:#ddd; 37 }