• 显示百度搜索页面下面的分页效果


    1:数据收集

    $pageIndex = $_GET['p']?$_GET['p']:'1';//当前页码
    $perpage = 10;//每页显示多少数量,和页码无关
    $count = 121;//总数是多少,//和页码无关
    $flag =9;//显示页码个数
    $pageCount = ceil($count/$perpage); //总的页码个数

    $pagesInRange = $this->page_show($pageIndex, $pageCount, $flag);//显示的页码数组

    注:page_show 是个函数,用于构造显示的页码数据的数组,如下所示。

    public function page_show2($pageIndex, $pageCount, $flag){

      if($flag > $pageCount){
        $flag = ( $pageCount);
      }

      if($flag%2){
        $aa = floor($flag/2);
        $lowerBound = $pageIndex - $aa;
        $upperBound = $pageIndex + $aa;
      }else{

        $aa = floor($flag/2);
        $lowerBound = $pageIndex - $aa;
        $upperBound = $pageIndex + $aa -1;
      }

      if( $lowerBound< 1){

        $offset = 0-$lowerBound +1;
        $lowerBound =1;
        $upperBound = $upperBound + $offset;
      }

      if($upperBound> $pageCount){

        $up = $upperBound;
        $upperBound = $pageCount;

        $offset = $up-$pageCount;
        $lowerBound = $lowerBound - $offset;
      }

      $data = array();
      for ($i=($lowerBound); $i <= ($upperBound); $i++) {

        $data[] = $i;
      }

      return $data;
     }

    数据构造完毕之后,需要用些数据,做判断,从而显示 哪些 页码。

    数据 用于html页面如下:(注:带$this->的变量,就是之前收集好的变量,只是在html页面上的写法不同而已,基本上框架中都是这么写的。假如没有框架的话,你得自己echo 出下面的数据,并且,去掉变量中的$this->字符)


    <?php if ($pageCount > 1): ?>
    <?php if (($pageIndex > 1)): ?>
    <span class="page_up"><a href="<?php echo $link . '&p=' . ($pageIndex-1) ?>">上一页</a></span>
    <?php endif; ?>
    <?php foreach($pagesInRange as $page) : ?>
    <?php if ($page == $pageIndex): ?>
    <span class="curr onthis"><?php echo $page;?></span>
    <?php else : ?>
    <span><a href="<?php echo $link . '&p=' . $page ?>"><?php echo $page;?></a></span>
    <?php endif;?>
    <?php endforeach;?>



    <?php if (($pageIndex< $pageCount)): ?>
    <span class="page_next"><a href="<?php echo $link . '&p=' . ($pageIndex +1) ?>">下一页</a></span>
    <?php endif; ?>
    <?php endif;?>

    效果如下 和百度搜索页,下面的分页差不多吧,样式得自己修改下。

  • 相关阅读:
    leetcode--Pascal's Triangle
    leetcode--Sort Colors
    leetcode--Gray Code
    leetcode--Minimum Path Sum
    leetcode--Convert Sorted List to Binary Search Tree
    leetcode--Generate Parentheses
    leetcode--Convert Sorted Array to Binary Search Tree
    leetcode--Merge Two Sorted Lists
    leetcode--Remove Element
    资源分享 | JavaScript Web应用开发【Nicolas Bevacqua】.pdf
  • 原文地址:https://www.cnblogs.com/yubinbin/p/3589461.html
Copyright © 2020-2023  润新知