PHP + AJAX 分頁技術完整實作

架構說明

• sn_inq.php：查詢表單頁，包含 AJAX 引擎與分頁顯示區塊
• sn_show.php：後端處理，接收查詢條件與頁碼，輸出 XML 格式資料

sn_inq.php 關鍵程式碼

<?php
// 表單輸出
echo '<form name="form1" method="post">
<table><tr>
<th>SN ID</th><td>
<input type="text" name="sn_id_1" size="16" maxlength="8"/> to
<input type="text" name="sn_id_2" size="16" maxlength="8"/>
<input type="button" value="Search" onclick="showcomment(1)"/>
</td></tr></table></form>
<div id="show"></div>';
?>

<script>
// 收集表單所有輸入值組成查詢字串
function getFormValue(form) {
    var str = '';
    for (var i=0; i<form.elements.length; i++) {
        var el = form.elements[i], type = el.type.toLowerCase();
        if (type=='select-one' || type=='text' || type=='hidden' || type=='textarea' ||
            (type=='radio' && el.checked) || (type=='checkbox' && el.checked)) {
            str += el.name + '=' + escape(el.value) + '&';
        }
    }
    return str.replace(/\s/g, '');
}

// 顯示指定頁資料
function showcomment(page) {
    var ajax = new Ajax('statusid', 'XML');
    var url = 'sn_show.php?page=' + page + '&' + getFormValue(document.form1);
    ajax.get(url, function(xml) {
        if (xml.lastChild) {
            document.getElementById('show').innerHTML = 'Loading...';
            document.getElementById('show').innerHTML = xml.lastChild.firstChild.nodeValue;
        } else {
            document.form1.submit(); // fallback
        }
    });
}

// 簡易 Ajax 類別（支援 XML/HTML、GET/POST、跨瀏覽器）
function Ajax(statusId, recvType) { /* ... 完整程式碼見原文 ... */ }
</script>

sn_show.php 後端邏輯

<?php
header("Content-Type: text/xml; charset=gb2312");

// 1. 分頁參數計算
function showpage($total) {
    $page = isset($_REQUEST['page']) ? intval($_REQUEST['page']) : 1;
    $num  = 10; // 每頁筆數
    $pagenum = ceil($total / $num);
    $page = min($page, $pagenum);
    $offset = ($page - 1) * $num;
    // ... 產生首頁、上一頁、下一頁、尾頁、頁碼選單 HTML ...
    return $pagenav;
}

// 2. 資料庫連線
$link = mysql_connect('localhost', 'root', 'password') or die('DB連線失敗');
mysql_select_db('inv');
mysql_query("SET NAMES 'GBK'");

// 3. 查詢條件組裝
$sql = "SELECT * FROM sn WHERE 1";
if ($_REQUEST['sn_id_1']) $sql .= " AND sn_id >= '" . $_REQUEST['sn_id_1'] . "'";
if ($_REQUEST['sn_id_2']) $sql .= " AND sn_id <= '" . $_REQUEST['sn_id_2'] . "'";
$sql .= " ORDER BY sn_id DESC";

// 4. 總筆數與分頁
$total = mysql_num_rows(mysql_query($sql));
$pagenav = showpage($total);

// 5. 當頁資料
$sql .= " LIMIT $offset, $num";
$res = mysql_query($sql);

// 6. 輸出 XML (CDATA 包裝 HTML 表格)
echo '<?xml version="1.0" encoding="gb2312"?><root><![CDATA[';
echo '<fieldset><legend>LIST</legend><table><tr>';
echo '<th>No</th><th>SN</th><th>Plant</th><th>Sales</th><th>Act</th><th>Type</th><th>Status</th><th>Release Date</th><th>Approve Date</th><th>Reject Date</th><th>Cancel Date</th><th>Close Date</th></tr>';
$rowNum = $offset;
while ($row = mysql_fetch_assoc($res)) {
    $cls = ($rowNum % 2 == 0) ? 'even' : 'odd';
    echo "<tr class='$cls'>";
    echo "<td>" . ++$rowNum . "</td>";
    echo "<td>" . $row['sn_id'] . "</td>";
    echo "<td>" . $row['sn_plant'] . "</td>";
    echo "<td>" . $row['sn_sales'] . "</td>";
    echo "<td>" . $row['sn_act'] . "</td>";
    echo "<td>" . $row['sn_type'] . "</td>";
    echo "<td>" . $row['sn_sts'] . "</td>";
    echo "<td>" . substr($row['sn_rel_date'],0,10) . "</td>";
    echo "<td>" . substr($row['sn_apv_date'],0,10) . "</td>";
    echo "<td>" . substr($row['sn_rej_date'],0,10) . "</td>";
    echo "<td>" . substr($row['sn_can_date'],0,10) . "</td>";
    echo "<td>" . substr($row['sn_cls_date'],0,10) . "</td>";
    echo "</tr>";
}
echo '</table><div>' . $pagenav . '</div></fieldset>';
echo ']]></root>';
?>

現代化改良建議

1. 使用 PDO + Prepared Statements 防止 SQL Injection
2. 後端輸出 JSON 而非 XML，前端用 fetch() + template literals 渲染
3. 引入 Vue.js / React / Alpine.js 管理狀態與 DOM 更新
4. 加入 Loading Spinner、錯誤重試、分頁快取機制