Jquery Mobile是一個(gè)強(qiáng)大的移動(dòng)前端框架，提供了許多有用的功能，其中分頁是其中一個(gè)最基本的功能。下面的代碼演示了如何使用Jquery Mobile實(shí)現(xiàn)一個(gè)簡單的分頁功能。

//定義每頁顯示的數(shù)據(jù)條數(shù)
var PAGE_SIZE = 10;
//定義當(dāng)前頁碼
var currentPage = 1;
//初始化數(shù)據(jù)
var data = [
{
name: '張三',
age: 20,
gender: '男'
},
{
name: '李四',
age: 25,
gender: '女'
},
// 省略其余數(shù)據(jù)
];
function renderPage(pageIndex) {
//計(jì)算需要顯示的數(shù)據(jù)的起始位置和結(jié)束位置
var start = (pageIndex - 1) * PAGE_SIZE;
var end = start + PAGE_SIZE;
//判斷是否需要進(jìn)行分頁
if (end >data.length) {
end = data.length;
}
//構(gòu)建HTML代碼
var html = '';
for (var i = start; i< end; i++) {
html += '
';
html += '
' + data[i].name + '
';
html += '
' + data[i].age + '
';
html += '
' + data[i].gender + '
';
html += '
';
}
//將HTML代碼插入到頁面中
$('div.data-container').html(html);
}
//初始化頁面
$(document).ready(function() {
//渲染第一頁數(shù)據(jù)
renderPage(currentPage);
//綁定上一頁和下一頁按鈕的點(diǎn)擊事件
$('button.prev-page').click(function() {
if (currentPage<= 1) {
return;
}
currentPage--;
renderPage(currentPage);
});
$('button.next-page').click(function() {
if (currentPage >= Math.ceil(data.length / PAGE_SIZE)) {
return;
}
currentPage++;
renderPage(currentPage);
});
});

代碼中包含了一個(gè)renderPage函數(shù)，該函數(shù)用于渲染指定頁碼的數(shù)據(jù)。在頁面初始化之后首先渲染第一頁的數(shù)據(jù)，然后綁定上一頁和下一頁按鈕的點(diǎn)擊事件。當(dāng)點(diǎn)擊上一頁按鈕時(shí)，會將當(dāng)前頁碼減1，然后重新渲染數(shù)據(jù)頁面；當(dāng)點(diǎn)擊下一頁按鈕時(shí)，會將當(dāng)前頁碼加1，然后重新渲染數(shù)據(jù)頁面。在渲染頁面的時(shí)候，需要首先計(jì)算需要顯示數(shù)據(jù)的起始位置和結(jié)束位置，然后構(gòu)造HTML代碼，最后將HTML代碼插入到頁面中。