AJAX（Asynchronous JavaScript and XML）可以實現網頁動態加載數據，使得表格分頁成為了一個相對簡單和高效的操作。本文將介紹如何使用AJAX技術實現表格分頁功能，并通過舉例說明其實用性和便利性。

表格分頁是一種常見的需求，特別是對于大數量的數據來說，將所有數據一次性加載到網頁中會導致頁面加載速度緩慢。而AJAX技術可以實現異步加載數據，只請求并顯示當前頁面所需的數據，從而提高用戶體驗。

首先，我們需要一個具有分頁功能的表格，并通過AJAX請求獲取分頁所需的數據。以下是一個使用AJAX實現表格分頁的例子：

<table id="table-pager">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
<div id="pagination">
<ul class="pagination">
<li><a href="#" class="prev"></a></li>
<li><a href="#" class="next"></a></li>
</ul>
</div>

在上述代碼中，我們使用了一個包含分頁功能的表格，以及一個用于顯示分頁導航的div。接下來，我們通過AJAX從服務器獲取數據，然后動態生成表格內容并更新分頁導航。

接下來，我們需要編寫JavaScript代碼來實現以上功能。以下是一個使用jQuery庫的例子：

$(document).ready(function() {
var currentPage = 1; // 當前頁碼
var pageSize = 10; // 每頁數據量
// 初始化表格和分頁導航
function initTable(data) {
var tableBody = $('#table-body');
tableBody.empty();
for (var i = 0; i< data.length; i++) {
var row = '<tr><td>' + data[i].id + '</td><td>' + data[i].name + '</td><td>' + data[i].age + '</td></tr>';
tableBody.append(row);
}
}
// 更新分頁導航
function updatePagination(totalPage) {
var pagination = $('#pagination ul');
pagination.empty();
var prevPage = (currentPage > 1) ? (currentPage - 1) : 1;
var nextPage = (currentPage < totalPage) ? (currentPage + 1) : totalPage;
var prevLink = '<a href="#" class="prev">上一頁</a>';
var nextLink = '<a href="#" class="next">下一頁</a>';
var prevItem = '<li>' + prevLink + '</li>';
var nextItem = '<li>' + nextLink + '</li>';
pagination.append(prevItem);
pagination.append(nextItem);
}
// 獲取分頁數據
function getPageData(page, successCallback) {
$.ajax({
url: 'data.php',
type: 'GET',
data: {
page: page,
pageSize: pageSize
},
success: successCallback
});
}
// 初始化頁面
getPageData(1, function(data) {
initTable(data);
updatePagination(totalPage);
});
// 上一頁按鈕點擊事件
$('#pagination').on('click', '.prev', function(e) {
e.preventDefault();
currentPage--;
getPageData(currentPage, function(data) {
initTable(data);
updatePagination(totalPage);
});
});
// 下一頁按鈕點擊事件
$('#pagination').on('click', '.next', function(e) {
e.preventDefault();
currentPage++;
getPageData(currentPage, function(data) {
initTable(data);
updatePagination(totalPage);
});
});
});

在以上代碼中，我們通過jQuery的Ajax方法發送GET請求，向服務器請求分頁數據。getPageData函數用于獲取指定頁碼的數據，并通過successCallback函數將數據傳遞給initTable和updatePagination函數進行更新。每次翻頁時，只需重新獲取相應頁碼的數據，然后更新表格內容和分頁導航即可。

通過以上示例，我們可以看到使用AJAX實現表格分頁非常方便和高效。通過異步加載數據，減少了不必要的網絡請求和頁面加載時間，提高了用戶體驗。

總之，AJAX是實現表格分頁的一種有效工具，其優勢在于可以異步加載數據，提高網頁性能。通過動態生成表格內容和更新分頁導航，可以實現數據的分頁展示和導航操作。希望本文能對讀者理解和應用AJAX實現表格分頁有所幫助。