zoukankan      html  css  js  c++  java
  • 一种分页的实现

    以下代码是一种分页的实现。分别是文件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>
    View Code

    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 }
    View Code
  • 相关阅读:
    【转】IntelliJ IDEA2017.3激活
    【转】构建Maven项目自动下载jar包
    【转】Intellij idea 的maven项目如何通过maven自动下载jar包
    【转】在IDEA中创建maven项目
    【转】maven的安装、配置以及下载jar包
    【转】git修改文件后,提交到远程仓库
    基于MbedTLS的AES加密实现,含STM32H7和STM32F4的实现例程
    Cortex-M7,A8,A9,A15与ADI的BlackFin以及SHARC的DSP性能PK
    基于V6的中移动物联测试例子,当前测试还挺稳定
    中移动物联手机端APP软件
  • 原文地址:https://www.cnblogs.com/omigia/p/4622520.html
Copyright © 2011-2022 走看看