實現jQuery分頁功能可以按照以下步驟進行:
<div id="pagination"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-pagination/3.1.1/jquery.pagination.min.js"></script>
$(document).ready(function() {
// 獲取總記錄數
var totalRecords = 100;
// 每頁顯示的記錄數
var recordsPerPage = 10;
// 初始化分頁插件
$('#pagination').pagination({
// 總記錄數
total: totalRecords,
// 每頁顯示的記錄數
pageSize: recordsPerPage,
// 分頁按鈕的數量
pageBtnCount: 5,
// 當前頁碼改變時的回調函數
onPageChange: function(pageNumber) {
// 根據頁碼獲取對應的數據并顯示
var start = (pageNumber - 1) * recordsPerPage;
var end = start + recordsPerPage;
displayData(start, end);
}
});
// 初始化顯示第一頁的數據
displayData(0, recordsPerPage);
// 根據起始索引和結束索引顯示數據
function displayData(start, end) {
// 根據起始索引和結束索引獲取數據
var data = getData(start, end);
// 清空分頁容器
$('#pagination').empty();
// 顯示數據
for (var i = 0; i < data.length; i++) {
$('#pagination').append('<p>' + data[i] + '</p>');
}
}
// 模擬獲取數據的函數
function getData(start, end) {
var data = [];
for (var i = start; i < end; i++) {
data.push('數據' + (i + 1));
}
return data;
}
});
以上代碼中,totalRecords
表示總記錄數,recordsPerPage
表示每頁顯示的記錄數。通過調用pagination
函數初始化分頁插件,并在onPageChange
回調函數中根據當前頁碼獲取對應的數據并顯示。
需要注意的是,以上代碼中的displayData
和getData
函數是示例函數,你需要根據實際需求自行編寫獲取和顯示數據的邏輯。
以上就是使用jQuery實現分頁功能的基本步驟,你可以根據實際需求進行調整和擴展。