分頁功能在項目開發中不可或缺，老司機操作起來就和呼吸一樣簡單，新手恐怕就會吃力一些。

?

今天我回顧了一下具體的操作步驟，決定詳細的分析一下每一步的實現目的及原理。

我們會創建一個簡單的json文件來模擬要從數據庫請求的數據。

分頁應注意下面幾點問題：

1） ?每頁的條目數量，以下用show_per_page變量來表示

2） ?頁數的統計，總頁數/show_per_page就是頁數了

3） ?利用a標簽的href屬性，指向對應的函數，就可以實現頁面跳轉

4） ?定義a標簽的一個longdisc屬性，來判斷哪個a標簽被選中，給他添加active_page類名

?

HTML代碼：

//用來存放目前的選中頁

<input type='hidden' id='current_page' />

//存放顯示的頁面條數

<input type='hidden' id='show_per_page' />

//顯示內容的盒子

<div id='content'>

</div>

//存放供選擇頁面的點擊按鈕

<div id='page_navigation'></div><br>

<br>

?

jQuery代碼：

$(function(){

????????//一個ajax的get請求，獲取要得到的數據

　　$.get("get.json",function(data){

　　　　var data=data;

????????????????//命名分頁的條目數量

　　　　var show_per_page = 5;?

????????????????//獲取到的數據條目數就是總的條目數量

　　　　var number_of_items = data.list.length;

????????????????//遍歷這些條目，創建p標簽并添加到div里面

　　　　var htmlStr="";

　　　　$.each(data.list, function(index,obj) {

　　　　　　htmlStr+="<p>"+obj+"</p>";

　　　　});

　　　　$("#content").append(htmlStr);

????????????????//顯示的頁數

　　　　var number_of_pages = Math.ceil(number_of_items/show_per_page);

????????????????//選中頁默認為0

　　　　$('#current_page').val(0);

????????????????//顯示頁面的條數

　　　　$('#show_per_page').val(show_per_page);

????????????????//拼接向前翻頁字符串

　　　　var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';

?????????????????//拼接將要顯示的總頁數的字符串，longdesc類似于alt標簽屬性，用作選中元素添加active_page類名

　　　　var current_link = 0;

　　　　while(number_of_pages > current_link){

????????????????????????navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ 　　　　(current_link + 1) +'</a>';

　　　　　　current_link++;

　　　　}

????????????????//拼接向后翻頁字符串

　　　　navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';

????????????????//將字符串添加到列表里

　　　　$('#page_navigation').html(navigation_html);

????????????????//默認第一個頁數按鈕的class名字

　　　　$('#page_navigation .page_link:first').addClass('active_page');

????????????????//將獲取的條數全部隱藏

　　　　$('#content').children().css('display', 'none');

????????????????//第一頁顯示的條數顯示

　　　　$('#content').children().slice(0, show_per_page).css('display', 'block');

　　})

});

//向前翻頁，回顧拼接字符串的點擊跳轉屬性

function previous(){ ? ?????

　　new_page = parseInt($('#current_page').val()) - 1;

????????//判斷如果它前面有兄弟元素，即跳到前一頁

　　if($('.active_page').prev('.page_link').length==true){

　　　　go_to_page(new_page);

　　}

}

//向后翻頁

function next(){

　　new_page = parseInt($('#current_page').val()) + 1;

　　//判斷如果它后面有兄弟元素，即跳到后一頁

　　if($('.active_page').next('.page_link').length==true){

　　　　go_to_page(new_page);

　　}

}

//這才是最核心的函數，它帶動每個翻頁功能

function go_to_page(page_num){ ? ?????

　　var show_per_page = parseInt($('#show_per_page').val());

　　start_from = page_num * show_per_page;

　　end_on = start_from + show_per_page;

????????//除了當前顯示頁面的數據顯示，其余都隱藏

　　$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

????????//當前點擊的頁面a按鈕添加avtive_page類名，其余都移除

　　$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');

????????//最重要的一步

　　$('#current_page').val(page_num);

}

?

這樣代碼就可以運行了

?

?

?

轉載于:https://www.cnblogs.com/blue-wz/p/6279420.html

總結

以上是生活随笔為你收集整理的jQuery实现的简单分页功能的详细解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。