有的時候，我們可能需要分頁，但是又不想刷新頁面或者不想更改點擊上一頁或下一頁而引起的數據變動，這時候假分頁可能會有幫助。比如之前做過考試的頁面，提交之前需要預覽一下，可是預覽的時候也要能夠編輯，而且可以返回到之前的頁面，這時候可能需要把數據傳遞到后臺并新建一張臨時表，很是麻煩，但是如果用假分頁就要省事太多了。

顧名思義，相對于真分頁而言假分頁就是不再向后臺請求頁數和每頁顯示多少數據。假分頁就是一開始就已經加載所有數據（數據不多的情況下不會影響性能的，太多就很影響了），根據前臺設置讓他分成多少頁每頁顯示多少條數據

廢話不多說，上代碼：

$(document).ready(function(){
?? ?var show_per_page = 30;
?? ?var number_of_items = $('.content').size();
?? ?var number_of_pages = Math.ceil(number_of_items/show_per_page);
?? ?$('#current_page').val(0);
?? ?$('#show_per_page').val(show_per_page);
?? ?var navigation_html = '<a class="previous_link" href="javascript:previous();">上一頁</a>';
?? ?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();">下一頁</a>';
?? ?$('#page_navigation').html(navigation_html);
?? ?$('#page_navigation .page_link:first').addClass('active_page');
?? ?$('.content').css('display', 'none');
?? ?$('.content').slice(0, show_per_page).css('display', 'block');?? ?
});

?

這個就是把每一題放在一個div中，然后統計div的數量，在設置每一頁顯示的div的數量，分頁就搞定了，通用性非常強，只需要修改代碼中的id等就可以了

轉載于:https://www.cnblogs.com/shaoyang/p/5276128.html

總結

以上是生活随笔為你收集整理的假分页的全部內容，希望文章能夠幫你解決所遇到的問題。

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