jQuery 是一種非常流行的 JavaScript 庫，它可以讓編寫前端代碼更加輕松和高效。無刷新分頁就是 jQuery 提供的一個非常常用的功能，可以使網頁的分頁功能更加智能和方便。下面我們來一起了解一下如何使用 jQuery 實現無刷新分頁。

$(function(){
var pageNum = 1; // 初始化當前頁碼
var pageSize = 10; // 每頁顯示的條數
getData(pageNum, pageSize); // 頁面加載時獲取第一頁數據
// 綁定分頁按鈕點擊事件
$('#page').on('click', '.pagination li', function(){
var $this = $(this);
if(!$this.hasClass('active') && !$this.hasClass('disabled')){
// 判斷點擊的按鈕是否為可點擊狀態
if($this.hasClass('prev')){
pageNum--;
}else if($this.hasClass('next')){
pageNum++;
}else{
pageNum = parseInt($this.text());
}
getData(pageNum, pageSize); // 獲取新的數據
}
});
function getData(pageNum, pageSize){
// 發送請求獲取數據
$.ajax({
url: 'data.php',
type: 'GET',
dataType: 'json',
data: {
page: pageNum,
size: pageSize
},
success: function(data){
// 解析返回的數據并渲染到頁面上
var html = '';
for(var i = 0; i< data.length; i++){
html += '
' + data[i].content + '
';
}
$('#data').html(html);
// 根據返回的結果渲染分頁按鈕
var totalPage = Math.ceil(data.total / pageSize);
var pageHtml = '';
if(totalPage >1){
pageHtml += '
上一頁
';
for(var i = 1; i<= totalPage; i++){
pageHtml += '
' + i + '
';
}
pageHtml += '
下一頁
';
}
$('#page .pagination').html(pageHtml);
},
error: function(){
alert('請求出錯，請重試！');
}
});
}
});

以上是用 jQuery 實現的基礎無刷新分頁代碼。通過監聽分頁按鈕的點擊事件，可以根據當前的頁碼以及每頁顯示的條數來向后臺發起請求獲取數據，并把數據動態渲染到頁面中。同時，還需要根據返回的數據來生成新的分頁按鈕并更新頁面上的分頁功能。