首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 網頁程式設計 >> PHP 程式設計 >> PHP 相關知識

PHP 分頁工具類:滑動窗口頁碼生成算法實現

     編輯:PHP 相關知識

分頁 UI 需求分析

優秀的分頁組件需滿足:

  • 首頁、尾頁始終可見
  • 當前頁附近顯示固定數量頁碼 (如 5-10 個)
  • 中間省略號表示跳過
  • 邊界情況自動調整 (首尾頁附近)

滑動窗口算法核心邏輯

<?php
class Paginator {
    private int $totalItems;      // 總記錄數
    private int $perPage;         // 每頁條數
    private int $currentPage;     // 當前頁碼
    private int $windowSize;      // 顯示頁碼數量 (含首尾)
    private string $urlPattern;   // URL 模板,如 '/list?page=%d'
    
    public function __construct(int $totalItems, int $perPage = 15, int $currentPage = 1, int $windowSize = 7, string $urlPattern = '') {
        $this->totalItems   = max(0, $totalItems);
        $this->perPage      = max(1, $perPage);
        $this->currentPage  = max(1, min($currentPage, $this->totalPages()));
        $this->windowSize   = max(3, $windowSize); // 至少首尾+當前
        $this->urlPattern   = $urlPattern ?: '?' . http_build_query(array_merge($_GET, ['page' => '%d']));
    }
    
    public function totalPages(): int {
        return max(1, (int)ceil($this->totalItems / $this->perPage));
    }
    
    public function render(): string {
        $total = $this->totalPages();
        if ($total <= 1) return '';
        
        $html = '';
        return $html;
    }
    
    private function link(int $page, string $text, bool $active = false): string {
        $url = sprintf($this->urlPattern, $page);
        $class = $active ? ' class="active"' : '';
        return "{$text}";
    }
    
    // 獲取分頁數據 (用於控制器)
    public function getLimitOffset(): array {
        $offset = ($this->currentPage - 1) * $this->perPage;
        return ['limit' => $this->perPage, 'offset' => $offset];
    }
}

控制器使用示例

<?php
// ArticleController.php
public function index() {
    $page = (int)($_GET['page'] ?? 1);
    $perPage = 10;
    
    $pdo = new PDO('mysql:host=localhost;dbname=blog', 'root', '');
    
    // 總數
    $total = $pdo->query("SELECT COUNT(*) FROM articles WHERE status=1")->fetchColumn();
    
    // 分頁器
    $paginator = new Paginator($total, $perPage, $page, 7);
    $limitOffset = $paginator->getLimitOffset();
    
    // 數據查詢
    $stmt = $pdo->prepare("SELECT * FROM articles WHERE status=1 ORDER BY created_at DESC LIMIT :offset, :limit");
    $stmt->bindValue(':offset', $limitOffset['offset'], PDO::PARAM_INT);
    $stmt->bindValue(':limit', $limitOffset['limit'], PDO::PARAM_INT);
    $stmt->execute();
    $articles = $stmt->fetchAll();
    
    // 視圖渲染
    include 'article_list.php'; // 內含 render() ?>
}

前端 CSS 參考

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

算法對比

算法特點適用場景
滑動窗口 (本文)當前頁居中、首尾固定、窗口大小恆定通用後台、列表頁、SEO 友好
固定塊每 10 頁一塊、跳轉塊超大數據集 (百萬頁)、管理後台
簡化版僅首尾、上下頁、當前頁±2移動端、極簡 UI

擴展:AJAX 無刷新分頁

// JS 片段 (jQuery)
$('.pagination').on('click', 'a', function(e) {
    e.preventDefault();
    const url = $(this).attr('href');
    $('#article-list').load(url + ' #article-list > *');
    history.pushState(null, '', url);
});
  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved