您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 相關知識

PHP 分頁工具類：滑動窗口算法實現優雅頁碼導航

編輯：PHP 相關知識

分頁導航是列表頁核心 UI 元件。本文分享一個採用「滑動尺子」演算法的 PHP 分頁類，自動處理首尾頁、當前頁附近頁碼、省略號等顯示邏輯，支援自訂顯示頁數量。

核心演算法：滑動窗口

將總頁數視為固定長度木塊，顯示頁數為可滑動尺子：

尺子 ≥ 木塊：直接顯示所有頁碼
尺子 < 木塊：計算尺子在木塊上的起始位置 $start 與結束位置 $end

關鍵方法實作

class Paginator {
    protected $totalPages;      // 總頁數
    protected $curPage;         // 當前頁
    protected $totalShowPages;  // 顯示頁碼數量 (建議奇數，如 5、7、9)

    // 核心：計算顯示範圍
    protected function getShowPageRange() {
        $pageHtml = '';

        // 計算起始頁：當前頁前推 2 頁，但不小於 1
        $start = max(1, $this->curPage - 2);

        // 計算結束頁：起始頁 + 顯示數量
        $end = $start + $this->totalShowPages;

        // 若超出總頁數，向前修正起始頁
        if ($end >= $this->totalPages) {
            $end = $this->totalPages;
            $start = max(1, $end - $this->totalShowPages);
        }

        // 1. 首頁
        if ($start > 1) {
            $pageHtml .= $this->getPageHtml(1);
            $preMore = max(1, $this->curPage - $this->totalShowPages);
            $pageHtml .= $this->getMorePageHtml($preMore); // 省略號
        }

        // 2. 中間連續頁碼
        for ($page = $start; $page < $end; $page++) {
            $pageHtml .= $this->getPageHtml($page);
        }

        // 3. 尾部省略號與末頁
        if ($end < $this->totalPages) {
            $pageHtml .= $this->getMorePageHtml($end);
        }
        $pageHtml .= $this->getNormalPageHtml($this->totalPages);

        return $pageHtml;
    }

    // 輔助方法：生成單一頁碼連結
    protected function getPageHtml($page) {
        $class = $page == $this->curPage ? ' class="active"' : '';
        return "{$page}";
    }

    protected function getMorePageHtml($page) {
        return "…{$page}";
    }

    protected function getNormalPageHtml($page) {
        return "{$page}";
    }
}

使用範例

$paginator = new Paginator();
$paginator->totalPages = 100;
$paginator->curPage = 45;
$paginator->totalShowPages = 7;

echo $paginator->render();
// 輸出類似：1 … 43 44 [45] 46 47 … 100

CSS 樣式建議

.pagination { display: flex; gap: 4px; align-items: center; }
.pagination a { padding: 6px 12px; border: 1px solid #ddd; border-radius: 3px; text-decoration: none; color: #333; }
.pagination a.active { background: #007bff; color: #fff; border-color: #007bff; }
.pagination a:hover:not(.active) { background: #f5f5f5; }
.pagination .more { color: #999; padding: 0 8px; }