zoukankan      html  css  js  c++  java
  • PHP分页组件:Paginator

    安装

    composer require "jasongrimes/paginator:~1.0"
    

    使用

    <?php
    require '../vendor/autoload.php';use JasonGrimesPaginator;
    $totalItems = 1000;  //总页数$itemsPerPage = 50;  // 每页显示数$currentPage = 8; // 当前所在页数$urlPattern = '/foo/page/(:num)';  // 定义跳转地址
    $paginator = new Paginator($totalItems, $itemsPerPage, $currentPage, $urlPattern);
    ?>
    <html>
      <head>
        <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
      </head>
      <body>    <?php 
          echo $paginator; 
        ?>
      </body>
    </html>
    

    使用浏览器你会看到这个效果:
    是不是很漂亮,查看网页生成的源代码会发现:

    <ul class="pagination">
      <li><a href="/foo/page/7">« Previous</a></li>
      <li><a href="/foo/page/1">1</a></li>
      <li class="disabled"><span>...</span></li>
      <li><a href="/foo/page/5">5</a></li>
      <li><a href="/foo/page/6">6</a></li>
      <li><a href="/foo/page/7">7</a></li>
      <li class="active"><a href="/foo/page/8">8</a></li>
      <li><a href="/foo/page/9">9</a></li>
      <li><a href="/foo/page/10">10</a></li>
      <li><a href="/foo/page/11">11</a></li>
      <li><a href="/foo/page/12">12</a></li>
      <li class="disabled"><span>...</span></li>
      <li><a href="/foo/page/20">20</a></li>
      <li><a href="/foo/page/9">Next »</a></li></ul>
    

    所以,我们可以根据项目需求自定义CSS样式来改变分页条的外观,但bootstrap的风格已经挺好了。

    自定义分页

    我们可以使用$paginator->getPages(), $paginator->getNextUrl(), 以及$paginator->getPrevUrl()来更好的控制HTML输出。

    <?php 
        $html = '<ul class="pagination">';    if ($paginator->getPrevUrl()) {
            $html .= '<li><a href="' . $paginator->getPrevUrl() . '">« 上一页</a></li>';
        }    foreach ($paginator->getPages() as $page) {        if ($page['url']) {
                $html .= '<li' . ($page['isCurrent'] ? ' class="active"' : '') . '><a href="' . $page['url'] . '">' . $page['num'] . '</a></li>';
            } else {
                $html .= '<li class="disabled"><span>' . $page['num'] . '</span></li>';
            }
        }    if ($paginator->getNextUrl()) {
            $html .= '<li><a href="' . $paginator->getNextUrl() . '">下一页 »</a></li>';
        }
        $html .= '</ul>';    echo $html; ?>
    

    如果是在移动端应用,可以将数字分页收起来,换成下拉选取分页的方式,节省空间也方便操作,
    Paginator项目在Github上的地址是:https://github.com/jasongrimes/php-paginator

  • 相关阅读:
    LeetCode "Sum Root to Leaf Numbers"
    LeetCode "Single Number"
    POJ #1033
    POJ #1011
    POJ #2411
    POJ #1276
    POJ #1260
    POJ #1221
    POJ #1080
    POJ #1050
  • 原文地址:https://www.cnblogs.com/qinsilandiao/p/10871642.html
Copyright © 2011-2022 走看看