jQuery是一個非常流行的JavaScript庫,它可以使我們在網頁中實現許多強大的功能。其中之一就是使用jQuery的Ajax請求來實現分頁功能。下面我們將用示例來演示如何使用jQuery Ajax來實現分頁。
$(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()函數來確保頁面加載完成后再執行我們的代碼。接下來,我們定義了三個變量:currentPage表示當前頁碼,totalPages表示總頁數,limitPerPage表示每頁顯示的記錄數。我們將currentPage初始化為1,并調用getPageData()函數來獲取第一頁的數據。getPageData()函數將會使用Ajax來請求服務器端的數據,并將結果展示在網頁中。
在Ajax請求中,我們使用了GET方法將page和limit參數傳遞給服務器。beforeSend()函數用來在Ajax請求發出前顯示一個loading圖標,success()函數將返回的數據顯示在網頁中,并計算出總頁數。如果發生錯誤,我們則在error()函數中進行錯誤處理。
最后,我們使用twbsPagination插件來生成分頁控件。該插件會根據totalPages來生成對應的分頁按鈕,并提供了onPageClick()函數來處理分頁按鈕被點擊時的事件。我們在onPageClick()回調函數中進行點擊后的操作,將currentPage更新為被點擊了的頁碼,并重新調用getPageData()去獲取對應的數據。
上一篇夸克css