PEAR Pager 與 AJAX 整合：實現無刷新分頁體驗

核心概念

Pager 不僅能產生 HTML 連結，透過設定 fileName 參數為 JavaScript 函數呼叫，即可與 AJAX 整合，實現局部更新分頁內容。

JavaScript 整合範例

<?php
require_once 'Pager/Pager.php';

$data = range(1, 100); // 模擬資料
$pager_params = array(
    'mode'     => 'Sliding',
    'append'   => false,          // 不附加 GET 參數
    'path'     => '',
    'fileName' => 'javascript:revealDiv(%d)', // %d 會被頁碼取代
    'perPage'  => 10,
    'delta'    => 5,
    'itemData' => $data,
);
$pager = & Pager::factory($pager_params);
$n_pages = $pager->numPages();
$links = $pager->getLinks();
?>

<html>
<head>
<script type="text/javascript">
var n_pages = <?php echo $n_pages ?>;
function revealDiv(n) {
    for (var i = 1; i <= n_pages; i++) {
        document.getElementById("page" + i).style.display = 'none';
    }
    document.getElementById("page" + n).style.display = 'block';
}
</script>
<style>
div.page { background:#FFFF99; border-top:1px solid #FFBF99; border-bottom:1px solid #FFBF99; }
</style>
</head>
<body>
<h1>PEAR::Pager with JavaScript</h1>
<?php echo $links['pages']; ?>
<hr />
<?php
for ($i = 1; $i <= $n_pages; $i++) {
    echo '<div class="page" id="page' . $i . '">';
    echo '<h2>Page ' . $i . '</h2>';
    foreach ($pager->getPageData($i) as $item) {
        echo 'Item ' . $item . '<br />';
    }
    echo '</div>';
}
?>
<hr />
<script>revealDiv(1);</script>
</body>
</html>

關鍵參數說明

• path：設為空字串，避免產生實體路徑。
• fileName：設為 javascript:revealDiv(%d)，Pager 會將 %d 替換為頁碼，產生 JS 呼叫連結。
• 前端預先渲染所有頁面資料於隱藏 <div>，點擊分頁連結時以 JS 切換顯示。

AJAX 進階應用

同理，將 fileName 設為 AJAX 請求函數（如 javascript:loadPage(%d)），在 loadPage 中發送 XMLHttpRequest 取得局部 HTML 並更新容器，即可實現真正的無刷新分頁。