Jquery Mobile是一種快速創(chuàng)建移動(dòng)應(yīng)用程序界面的框架。在開(kāi)發(fā)移動(dòng)應(yīng)用時(shí)，我們經(jīng)常需要使用分頁(yè)來(lái)呈現(xiàn)大量數(shù)據(jù)。本文將介紹使用jquery mobile實(shí)現(xiàn)列表分頁(yè)的方法。

//第一步: 設(shè)置每頁(yè)顯示的列表項(xiàng)數(shù)目
var pageSize = 10;
//第二步: 獲取列表元素
var list = $('#list');
//第三步: 獲取列表項(xiàng)數(shù)量
var itemsCount = list.find('li').length;
//第四步: 計(jì)算總頁(yè)數(shù)
var totalPages = Math.ceil(itemsCount / pageSize);
//第五步: 創(chuàng)建分頁(yè)控件
for (var i = 0; i < totalPages; i++) {
var pageBtn = $('' + (i + 1) + '').appendTo('#pager');
pageBtn.bind('click', function () {
showPage($(this).text());
return false;
});
}
//第六步: 顯示指定頁(yè)的列表項(xiàng)
function showPage(page) {
list.find('li').hide();
list.find('li').slice((page - 1) * pageSize, page * pageSize).show();
}

以上代碼中，我們首先設(shè)置每頁(yè)顯示的列表項(xiàng)數(shù)目。然后，通過(guò)jquery選擇器獲取列表元素，并計(jì)算出列表項(xiàng)數(shù)量。接著，我們根據(jù)每頁(yè)顯示的列表項(xiàng)數(shù)目和列表項(xiàng)數(shù)量計(jì)算出總頁(yè)數(shù)，并創(chuàng)建分頁(yè)控件。最后，我們定義一個(gè)函數(shù)用于顯示指定頁(yè)的列表項(xiàng)。通過(guò)調(diào)用該函數(shù)，我們就可以輕松地切換列表分頁(yè)。