後台分頁 + 局部刷新：AJAX 獲取數據並替換表格內容的實現模式

需求

列表數據後端分頁，點擊頁碼無刷新更新表格區域。

核心流程

1. 前端：頁碼綁定點擊事件 → $.get('/api/list?page=2', renderTable)。
2. 後端：返回 JSON {data: [...], total: 100, page: 2, pageSize: 10}。
3. 渲染：清空 tbody → 循環拼接 tr 字符串 → tbody.innerHTML = html 或 $(tbody).html(html)。

代碼示例 (jQuery)

// 頁碼委託事件
$('#pagination').on('click', 'a.page-link', function(e) {
    e.preventDefault();
    const page = $(this).data('page');
    loadPage(page);
});

function loadPage(page) {
    $.getJSON('/api/data', {page: page, size: 10}, function(res) {
        // 1. 渲染表格
        let html = '';
        res.data.forEach(item => {
            html += `${item.id}${item.name}...刪除`;
        });
        $('#data-tbody').html(html);
        // 2. 重新渲染分頁條
        renderPager(res.page, res.totalPages);
    });
}

進階優化

• 使用 template.js / art-template 分離模板與數據。
• 引入 Loading 骨架屏 提升體驗。
• 對分頁按鈕 防抖，避免快速點擊發並發請求。