Jquery Mobile是一個強大的移動前端框架,提供了許多有用的功能,其中分頁是其中一個最基本的功能。下面的代碼演示了如何使用Jquery Mobile實現一個簡單的分頁功能。
//定義每頁顯示的數據條數 var PAGE_SIZE = 10; //定義當前頁碼 var currentPage = 1; //初始化數據 var data = [ { name: '張三', age: 20, gender: '男' }, { name: '李四', age: 25, gender: '女' }, // 省略其余數據 ]; function renderPage(pageIndex) { //計算需要顯示的數據的起始位置和結束位置 var start = (pageIndex - 1) * PAGE_SIZE; var end = start + PAGE_SIZE; //判斷是否需要進行分頁 if (end >data.length) { end = data.length; } //構建HTML代碼 var html = ''; for (var i = start; i< end; i++) { html += ''; html += ''; } //將HTML代碼插入到頁面中 $('div.data-container').html(html); } //初始化頁面 $(document).ready(function() { //渲染第一頁數據 renderPage(currentPage); //綁定上一頁和下一頁按鈕的點擊事件 $('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); }); });' + data[i].name + ''; html += '' + data[i].age + ''; html += '' + data[i].gender + ''; html += '
代碼中包含了一個renderPage函數,該函數用于渲染指定頁碼的數據。在頁面初始化之后首先渲染第一頁的數據,然后綁定上一頁和下一頁按鈕的點擊事件。當點擊上一頁按鈕時,會將當前頁碼減1,然后重新渲染數據頁面;當點擊下一頁按鈕時,會將當前頁碼加1,然后重新渲染數據頁面。在渲染頁面的時候,需要首先計算需要顯示數據的起始位置和結束位置,然后構造HTML代碼,最后將HTML代碼插入到頁面中。