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

PHP 分頁導航核心代碼片段：首頁、上下頁、尾頁、頁碼生成

編輯：PHP 相關知識

場景定位

本片段專注於分頁導航的 HTML + PHP 混合輸出 部分，適用於已經計算好 $totalnum（總條數）、$pagecount（總頁數）、$pagenum（每頁條數）、$page（當前頁）的上下文中。它是分頁系統的「視圖層」組件，可直接嵌入列表頁模板。

代碼片段（重構優化版）

<!-- 分頁信息統計 -->
<div class="pagination-info">
    共 <strong><?php echo $totalnum; ?></strong> 條記錄 ； 
    共 <strong><?php echo $pagecount; ?></strong> 頁 ； 
    每頁顯示 <strong><?php echo $pagenum; ?></strong> 條
</div>

<!-- 分頁導航鏈接 -->
<nav class="pagination" aria-label="頁面導航">
    <ul>
        <!-- 首頁 -->
        <li><a href="<?php echo $_SERVER['PHP_SELF']; ?>?page=1">首頁</a></li>

        <!-- 上一頁：當前頁>1 時顯示 page-1，否則禁用/隱藏 -->
        <li>
            <?php if ($page > 1): ?>
                <a href="<?php echo $_SERVER['PHP_SELF']; ?>?page=<?php echo $page - 1; ?>">上一頁</a>
            <?php else: ?>
                <span class="disabled">上一頁</span>
            <?php endif; ?>
        </li>

        <!-- 頁碼區：根據總頁數決定生成策略 -->
        <?php if ($pagecount <= 10): ?>
            <!-- 總頁數少：全部顯示 -->
            <?php for ($i = 1; $i <= $pagecount; $i++): ?>
                <li <?php if ($i == $page) echo 'class="active"'; ?>>
                    <a href="<?php echo $_SERVER['PHP_SELF']; ?>?page=<?php echo $i; ?>"><?php echo $i; ?></a>
                </li>
            <?php endfor; ?>
        <?php else: ?>
            <!-- 總頁數多：省略號折疊策略 -->
            <?php
            $showPages = [];
            $showPages[] = 1; // 首頁
            if ($page > 3) $showPages[] = '...'; // 左省略
            for ($i = max(2, $page - 1); $i <= min($pagecount - 1, $page + 1); $i++) {
                $showPages[] = $i; // 當前頁附近
            }
            if ($page < $pagecount - 2) $showPages[] = '...'; // 右省略
            $showPages[] = $pagecount; // 尾頁
            ?>
            <?php foreach ($showPages as $p): ?>
                <?php if ($p === '...'): ?>
                    <li class="ellipsis"><span>...</span></li>
                <?php else: ?>
                    <li <?php if ($p == $page) echo 'class="active"'; ?>>
                        <a href="<?php echo $_SERVER['PHP_SELF']; ?>?page=<?php echo $p; ?>"><?php echo $p; ?></a>
                    </li>
                <?php endif; ?>
            <?php endforeach; ?>
        <?php endif; ?>

        <!-- 下一頁 -->
        <li>
            <?php if ($page < $pagecount): ?>
                <a href="<?php echo $_SERVER['PHP_SELF']; ?>?page=<?php echo $page + 1; ?>">下一頁</a>
            <?php else: ?>
                <span class="disabled">下一頁</span>
            <?php endif; ?>
        </li>

        <!-- 尾頁 -->
        <li><a href="<?php echo $_SERVER['PHP_SELF']; ?>?page=<?php echo $pagecount; ?>">尾頁</a></li>
    </ul>
</nav>

關鍵邏輯解析

1. $_SERVER['PHP_SELF'] 的安全性

原代碼直接輸出 $_SERVER['PHP_SELF'] 存在 XSS 風險（攻擊者可構造 /list.php/?page=1）。

修復：htmlspecialchars($_SERVER['PHP_SELF']) 或使用框架路由生成器 url('list')。

2. 邊界條件的「禁用態」處理

原代碼在第一頁仍生成 page=1 的「上一頁」鏈接，邏輯混亂。優化版採用 條件渲染：

可用時輸出 <a href="...">
不可用時輸出 <span class="disabled">，CSS 置灰，語義明確，利於無障礙訪問。

3. 頁碼折疊算法（省略號策略）

當總頁數 > 10 時，採用 首頁 + 左省略 + 當前頁±1 + 右省略 + 尾頁 模式：

// 示例：當前第 50 頁，共 100 頁
[1] [...] [48] [49] [50] [51] [52] [...] [100]

該算法保證：用戶始終能一鍵到達首尾，且能看到當前頁上下文，鏈接數量恆定（約 7-9 個），界面整潔。

4. 活躍頁高亮

<li <?php if ($i == $page) echo 'class="active"'; ?>>

配合 CSS .pagination .active a { background: #007bff; color: #fff; pointer-events: none; } 視覺區分當前位置。

CSS 樣式建議（現代化）

.pagination { display: flex; gap: 4px; justify-content: center; margin: 20px 0; }
.pagination ul { display: flex; list-style: none; gap: 4px; padding: 0; margin: 0; }
.pagination li { display: inline-flex; }
.pagination a, .pagination span { 
    display: block; padding: 8px 12px; border: 1px solid #dee2e6; border-radius: 4px; 
    color: #007bff; text-decoration: none; transition: all .2s; min-width: 36px; text-align: center;
}
.pagination a:hover { background: #e9ecef; }
.pagination .active a { background: #007bff; color: #fff; border-color: #007bff; cursor: default; }
.pagination .disabled span { color: #6c757d; border-color: #dee2e6; cursor: not-allowed; }
.pagination .ellipsis span { padding: 8px 4px; border: none; color: #6c757d; }

無障礙 (a11y) 增強

<nav aria-label="頁面導航"> 標識導航區域
當前頁 <a aria-current="page"> 告知屏幕閱讀器
禁用鏈接用 <span> 而非 <a href="#">，避免鍵盤聚焦無效項

總結

分頁導航雖是小組件，但包含邊界邏輯、XSS 防護、折疊算法、視覺反饋、無障礙語義等工程細節。將其封裝為 獨立視圖組件/函數（如 render_pagination($page, $pagecount, $baseUrl)），配合現代 CSS Flex 布局，即可在任何項目中復用，保證一致的用戶體驗與代碼質量。