自製 AJAX 分頁元件：模仿 Yii 框架無刷新翻頁體驗

Yii 框架內建的 CListView 與 CPagination 提供優雅的 AJAX 分頁體驗。若專案未使用框架，仍可用原生 JavaScript + jQuery 快速打造同樣效果。本文提供一個極簡示例，展示核心邏輯：點擊頁碼 → 發送 AJAX 請求 → 以回傳 HTML 替換局部內容。

完整可執行範例

<!DOCTYPE html>
<html>
<head>
  <title>AJAX 分頁示範</title>
  <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
  function loadXMLDoc(url) {
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var $data = $('<div>' + xhr.responseText + '</div>');
        $('#updateId').replaceWith($('#updateId', $data));
      }
    };
    xhr.open('GET', url, true);
    xhr.send();
  }
  </script>
</head>
<body>
  <table id="updateId">
    <tr><th>ID</th><th>標題</th><th>時間</th></tr>
    <?php if (isset($_GET['p']) && $_GET['p'] == 2): ?>
      <tr><td>2</td><td>222</td><td>222</td></tr>
      <tr><td>2</td><td>222</td><td>222</td></tr>
    <?php else: ?>
      <tr><td>1</td><td>111</td><td>111</td></tr>
      <tr><td>1</td><td>111</td><td>111</td></tr>
    <?php endif; ?>
  </table>
  <div>
    <a href="javascript:;" onclick="loadXMLDoc('?p=1')">1</a>
    <a href="javascript:;" onclick="loadXMLDoc('?p=2')">2</a>
  </div>
</body>
</html>

關鍵點解析

1. 相容性處理：同時支援現代瀏覽器 XMLHttpRequest 與 IE5/6 ActiveXObject。
2. 局部更新策略：將回傳 HTML 包裝成 jQuery 物件，用 replaceWith 精準替換 #updateId 表格，避免全頁重繪。
3. 伺服器端分頁邏輯：PHP 端根據 $_GET['p'] 輸出對應頁資料，實際專案應改為查詢資料庫並配合 LIMIT/OFFSET。

進階擴充建議

• 加入載入中指示器（Spinner）提升體驗。
• 使用 history.pushState 讓分頁 URL 可被書籤/分享。
• 錯誤處理：xhr.status !== 200 時顯示友善提示。
• 將分頁邏輯封裝為可重用 jQuery Plugin 或 ES6 Module。