jQuery是一款非常流行的JavaScript庫，它提供了各種強大的功能，其中之一是AJAX。

在前端開發中，我們通常使用表格來呈現數據。如果數據過多，我們需要使用分頁功能來展示數據，以避免頁面加載過慢和占用過多的資源。在jQuery中使用AJAX和table的結合可以輕松實現這個功能。

$.ajax({
type: "GET",
url: "data.php",
dataType: "json",
data: {'page': page},
success: function(response){
$('#tableBody').empty(); // 清空當前表格數據
$.each(response.data, function(key, value){
var tr = '' +
'' + value.id + '' +
'' + value.name + '' +
'' + value.age + '' +
'';
$('#tableBody').append(tr); // 添加新數據到表格中
});
// 分頁
var pageHtml = '';
for(var i = 1; i<= response.totalPages; i++){
if(i == response.currentPage){ // 當前頁標記
pageHtml += '
' + i + '
';
}else{
pageHtml += '
' + i + '
';
}
}
$('#pagination').empty().append(pageHtml); // 遍歷分頁導航欄
// 綁定分頁事件
$('#pagination a').on('click', function(e){
e.preventDefault();
var page = $(this).text();
loadTableData(page); // 切換頁面時重新加載table數據
});
}
});
function loadTableData(page){
$.ajax({
type: "GET",
url: "data.php",
dataType: "json",
data: {'page': page},
success: function(response){
$('#tableBody').empty();
$.each(response.data, function(key, value){
var tr = '' +
'' + value.id + '' +
'' + value.name + '' +
'' + value.age + '' +
'';
$('#tableBody').append(tr);
});
var pageHtml = '';
for(var i = 1; i<= response.totalPages; i++){
if(i == response.currentPage){
pageHtml += '
' + i + '
';
}else{
pageHtml += '
' + i + '
';
}
}
$('#pagination').empty().append(pageHtml);
$('#pagination a').on('click', function(e){
e.preventDefault();
var page = $(this).text();
loadTableData(page);
});
}
});
}

我們可以看到，使用AJAX和table結合可以輕松實現表格分頁功能。在代碼中，我們通過發送AJAX請求，獲取數據并使用JavaScript將其動態渲染到表格中。同時，我們還實現了分頁功能并且在頁面切換時重新加載了table數據。

這種方法非常適合在后臺工程師提供的API或JSON數據源上進行前端開發。它允許您輕松地提取并呈現數據，從而使您的頁面看起來更漂亮，同時節省加載時間和資源。