jQuery Mobile List 分頁

jQuery Mobile 是一款基于 jQuery 的移動端框架，可以快速搭建移動應用。在 jQuery Mobile 中，列表是一個非常重要的組件，我們可以在列表中展示數據，并使用分頁功能實現數據分段加載。

使用 jQuery Mobile 的列表分頁功能，我們可以將一個較大的數據列表，分為多個子集來展示，從而減小頁面渲染的壓力，提高用戶體驗。下面是一個簡單的 jQuery Mobile 列表分頁示例：

<ul data-role="listview" id="myList">
<li>第 1 頁</li>
<li>數據列表 1</li>
<li>數據列表 2</li>
<li>數據列表 3</li>
...
<li><a href="#" id="next">下一頁</a></li>
</ul>

上面的代碼中，我們定義了一個 ul 列表，使用 data-role="listview" 來啟用 jQuery Mobile 的列表樣式。列表中包含了多個 li 元素，其中前兩個 li 元素為分頁導航欄。最后一個 li 元素中包含一個超鏈接，通過點擊該鏈接可以跳轉到下一頁顯示更多數據。

我們還需要編寫 JavaScript 代碼來實現 jQuery Mobile 分頁的功能：

$(document).on("pagecreate", function() {
var myPage = $("#myList li:eq(0)").text();
var pageSize = 3;
var totalSize = $("#myList li").length - 2;
var totalPages = Math.ceil(totalSize / pageSize);
$("#myList li").hide();
$("#myList li:lt(" + (pageSize + 2) + ")").show();
$("#next").click(function() {
var currentPage = parseInt(myPage.split(" ")[1]);
if (currentPage < totalPages) {
$("#myList li").hide();
var currPageFirstItem = pageSize * (currentPage - 1) + 2;
$("#myList li:lt(" + currPageFirstItem + ")").show();
$("#myList li:gt(" + (currPageFirstItem + pageSize - 1) + ")").hide();
$("#myList li:eq(0)").text("第 " + (currentPage + 1) + " 頁");
myPage = $("#myList li:eq(0)").text();
}
});
});

上面的代碼中，我們首先獲取了頁面中的列表元素及相關參數。其中，myPage 變量用于存儲當前頁碼，pageSize 變量用于存儲每頁顯示的數據量，totalSize 變量用于存儲列表的總數，totalPages 變量用于存儲總頁數。

我們使用 hide() 和 show() 方法來控制列表的顯示與隱藏。首先將所有的列表元素都隱藏，然后通過 :lt() 和 :gt() 選擇器來顯示當前頁碼對應的列表元素，并將其他的列表元素隱藏。

接下來，我們為導航欄中的下一頁鏈接添加了 click 事件監聽器，通過計算當前頁碼和總頁數，來實現頁面的跳轉和數據的加載。

通過以上代碼，我們可以實現一個基本的 jQuery Mobile 列表分頁功能。在實際應用中，我們還可以通過動態加載數據等方式來實現更為高級的列表分頁效果。