jQuery是一個(gè)非常流行的JavaScript庫，它可以使我們?cè)诰W(wǎng)頁中實(shí)現(xiàn)許多強(qiáng)大的功能。其中之一就是使用jQuery的Ajax請(qǐng)求來實(shí)現(xiàn)分頁功能。下面我們將用示例來演示如何使用jQuery Ajax來實(shí)現(xiàn)分頁。

$(document).ready(function() {
var currentPage = 1;
var totalPages = 0;
var limitPerPage = 10;
getPageData();
function getPageData() {
var url = "page_data.php";
var data = { page: currentPage, limit: limitPerPage };
$.ajax({
url: url,
data: data,
type: "GET",
beforeSend: function() {
$('#loader').show();
},
success: function(response) {
$('#data_container').html(response);
totalPages = Math.ceil($('#total_records').val() / limitPerPage);
$('#loader').hide();
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
}
$('#pagination').twbsPagination({
totalPages: totalPages,
visiblePages: 5,
onPageClick: function(event, page) {
currentPage = page;
getPageData();
}
});
});

首先，我們使用jQuery的ready()函數(shù)來確保頁面加載完成后再執(zhí)行我們的代碼。接下來，我們定義了三個(gè)變量：currentPage表示當(dāng)前頁碼，totalPages表示總頁數(shù)，limitPerPage表示每頁顯示的記錄數(shù)。我們將currentPage初始化為1，并調(diào)用getPageData()函數(shù)來獲取第一頁的數(shù)據(jù)。getPageData()函數(shù)將會(huì)使用Ajax來請(qǐng)求服務(wù)器端的數(shù)據(jù)，并將結(jié)果展示在網(wǎng)頁中。

在Ajax請(qǐng)求中，我們使用了GET方法將page和limit參數(shù)傳遞給服務(wù)器。beforeSend()函數(shù)用來在Ajax請(qǐng)求發(fā)出前顯示一個(gè)loading圖標(biāo)，success()函數(shù)將返回的數(shù)據(jù)顯示在網(wǎng)頁中，并計(jì)算出總頁數(shù)。如果發(fā)生錯(cuò)誤，我們則在error()函數(shù)中進(jìn)行錯(cuò)誤處理。

最后，我們使用twbsPagination插件來生成分頁控件。該插件會(huì)根據(jù)totalPages來生成對(duì)應(yīng)的分頁按鈕，并提供了onPageClick()函數(shù)來處理分頁按鈕被點(diǎn)擊時(shí)的事件。我們?cè)趏nPageClick()回調(diào)函數(shù)中進(jìn)行點(diǎn)擊后的操作，將currentPage更新為被點(diǎn)擊了的頁碼，并重新調(diào)用getPageData()去獲取對(duì)應(yīng)的數(shù)據(jù)。