Question

我的页面上有自定义分页，并且我想更改该分页的UI行为。

如果我有十页，则分页显示如下：1 2 3 4 5 6 7 8 9 10。我想将其样式更改为1 2 3 4 ... 10。当用户位于第4页时，则应为1 ... 3 4 5 6 ... 10。

我该怎么做？这是HTML：

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="1">1</a></li>
  <li class="page-item"><a class="page-link" href="2">2</a></li>
  <li class="page-item"><a class="page-link" href="3">3</a></li>
  <li class="page-item"><a class="page-link" href="4">4</a></li>
  <li class="page-item"><a class="page-link" href="5">5</a></li>
  <li class="page-item"><a class="page-link" href="6">6</a></li>
  <li class="page-item"><a class="page-link" href="7">7</a></li>
  <li class="page-item"><a class="page-link" href="8">8</a></li>
  <li class="page-item"><a class="page-link" href="9">9</a></li>
</ul>

Answer 1

这是我在PHP中构建的Bootstrap Paginator类，它完成了我认为您需要的https://raw.githubusercontent.com/delboy1978uk/bone/feature/middleware/src/View/Helper/Paginator.php

<?php

class Paginator
{
    private $currentPage = 1;
    private $customNext;
    private $customPrev;
    private $pageCount;
    private $pagerSize = 5;
    private $url;
    private $urlPart = ':page';

    /**
     * @param int $pageNum
     * @return string
     */
    private function url(int $pageNum): string
    {
        return str_replace($this->urlPart, $pageNum, $this->url);
    }

    /**
     * @param $pageCount
     */
    public function setPageCount(int $pageCount): void
    {
        $this->pageCount = $pageCount;
    }

    /**
     * @param $pageCount
     */
    public function setPageCountByTotalRecords(int $rowCount, int $numPerPage): void
    {
        $this->pageCount = (int) ceil($rowCount / $numPerPage);
    }

    /**
     * @param $url
     */
    public function setUrl(string $url): void
    {
        $this->url = $url;
    }

    /**
     * @param $replace
     */
    public function setUrlPart(string $replace): void
    {
        $this->urlPart = $replace;
    }

    /**
     * @param int $page_no
     */
    public function setCurrentPage(int $page_no): void
    {
        $this->currentPage = $page_no;
    }


    /**
     * @param $url
     */
    public function setCustomPrev($url): void
    {
        $this->customPrev = '<a href="' . $url . '/"><i class="icon-backward"></i></a>';
    }


    /**
     * @param $url
     */
    public function setCustomNext(string $url)
    {
        $this->customNext = '<a href="' . $url . '/"><i class="icon-forward"></i></a>';
    }

    /**
     * @param int $numBoxes an ODD number!
     */
    public function setPagerSize(int $numBoxes): void
    {
        if ($numBoxes % 2 === 0) {
            $numBoxes--;
        }
        $this->pagerSize = $numBoxes;
    }

    /**
     * @return int
     */
    public function getPagerSize(): int
    {
        if (!$this->pagerSize) {
            $this->pagerSize = 5;
        }
        return $this->pagerSize;
    }

    /**
     * @return string
     * @throws PaginatorException
     */
    public function render(): string
    {
        if (!$this->pageCount) {
            throw new PaginatorException(Exception::NO_PAGE_COUNT);
        }

        if (!$this->url) {
            throw new Exception('NO_URL');
        }

        if (!$this->currentPage) {
            throw new Exception('NO_CURRENT_PAGE');
        }

        $html = '<nav><ul class="pagination">';

        if ($this->pageCount > ($this->getPagerSize() - 1)) {
            $pages = $this->getPagerSize();
            $half = ($pages - 1) / 2;
            if ($this->currentPage === 1) {
                $start = 1;
            } elseif ($this->currentPage === 2) {
                $start = 1;
            } elseif ($this->currentPage >= ($this->pageCount - $half)) {
                $start = $this->pageCount - ($this->getPagerSize() - 1);
            } else {
                $start = $this->currentPage - $half;
                if ($start < 1) {
                    $start = 1;
                }
            }
        } else {
            $pages = $this->pageCount;
            $start = 1;
        }

        $html .= ($this->currentPage === 1) ? '<li class="page-item disabled">' :'<li class="page-item">';
        if (isset($this->customPrev)) {
            $html .= $this->customPrev;
        } elseif ($this->currentPage === 1) {
            $html .= '<a class="page-link"  href ="#"><i class="fa fa-backward disabled" /></a>';
        } else {
            $html .= '<a class="page-link"  href ="' . $this->url(1) . '"><i class="fa fa-fastbackward" /></a>';
        }
        $html .= '</li>';

        $html .= ($this->currentPage === 1) ? '<li class="page-item disabled">' :'<li class="page-item">';
        if (isset($this->customPrev)) {
            $html .= $this->customPrev;
        } elseif ($this->currentPage === 1) {
            $html .= '<a class="page-link"  href ="#">' . Icon::custom(Icon::BACKWARD, 'disabled') . '</a>';
        } else {
            $html .= '<a class="page-link"  href ="' . $this->url($this->currentPage - 1) . '"><i class="fa fa-backward" /></a>';
        }
        $html .= '</li>';

        for ($x = $start; $x <= ($start + ($pages - 1)); $x++) {
            $html .= '<li class="page-item ';
            if ($this->currentPage === $x) {
                $html .= ' active" aria-current="page';
            }
            $html .= '">';
            if ($this->currentPage === $x) {
                $html .= '<a class="page-link" href="#">' . $x . '</a>';
            } else {
                $html .= '<a class="page-link" href="' . $this->url($x) .'">' . $x . '</a>';
            }
            $html .= '</li>';
        }

        $html .= ($this->currentPage >= $this->pageCount) ? '<li class="page-item disabled">' :'<li class="page-item">';
        if (isset($this->customNext)) {
            $html .= $this->customNext;
        } elseif ($this->currentPage >= $this->pageCount) {
            $html .= '<a class="page-link" href="#">' . Icon::custom(Icon::FORWARD, 'disabled') . '</a>';
        } else {
            $html .= '<a class="page-link"  href ="' . $this->url($this->currentPage + 1) . '"><i class="fa fa-forward" /></i></a>';
        }
        $html .= '</li>';

        $html .= ($this->currentPage >= $this->pageCount) ? '<li class="page-item disabled">' : '<li class="page-item">';
        if (isset($this->customNext)) {
            $html .= $this->customNext;
        } elseif ($this->currentPage >= $this->pageCount) {
            $html .= '<a class="page-link" href="#"><i class="fa fa-fastforward disabled" /></a>';
        } else {
            $html .= '<a class="page-link"  href ="' . $this->url($this->pageCount) . '"><i class="fa fa-fast_forward" /></i></a>';
        }
        $html .= '</li>';
        $html .= '</ul></nav>';

        return $html;
    }
}

设置方法如下：

$pager = new Paginator();
$pager->setPagerSize(9); // show nine boxes
$pager->setUrl('/some/url?page=:page'); // anything here, with :page placeholder
$pager->setPageCountByTotalRecords($totalRecordCount, $numPerPage);

echo $pager->render();

现在，您将获得带有箭头链接的寻呼机

<< < 1 2 3 4 5 6 7 8 9 > >>

然后点击7号数字，您会得到：

<< < 3 4 5 6 7 8 9 10 11 > >>

希望这对您有帮助：-）

如何更改分页界面

1 个答案: