業(yè)務(wù)是這樣的，有一個(gè)數(shù)據(jù)從后臺(tái)傳到前臺(tái)，因?yàn)閿?shù)據(jù)量不大，因此傳過(guò)來(lái)之后直接顯示即可，但是=。=所謂的數(shù)據(jù)量不大，最多也達(dá)到成百上千條，不可能全部顯示出來(lái)，那么就需要分頁(yè)

常規(guī)的分頁(yè)是利用Ajax，通過(guò)傳頁(yè)偏移量到后臺(tái)，后臺(tái)查詢(xún)數(shù)據(jù)庫(kù)再返回?cái)?shù)據(jù)，可以實(shí)現(xiàn)無(wú)刷新分頁(yè)，拿到的數(shù)據(jù)也是最新的

前端分頁(yè)

優(yōu)點(diǎn)：一次傳輸數(shù)據(jù)，避免用戶(hù)反復(fù)請(qǐng)求服務(wù)器，減少網(wǎng)絡(luò)帶寬、服務(wù)器調(diào)度壓力、數(shù)據(jù)庫(kù)查詢(xún)、緩存查詢(xún)壓力

缺點(diǎn)：有新數(shù)據(jù)無(wú)法實(shí)時(shí)更新，除非用戶(hù)重新請(qǐng)求數(shù)據(jù)

過(guò)程

剛開(kāi)始我不希望造輪子，想盡快完成，于是找了很久Bootstrap的工具，找到了一個(gè)BootstrapTable,這個(gè)插件很強(qiáng)大，除了可以使用常規(guī)的方式分頁(yè)，還可以指定數(shù)據(jù)（json），進(jìn)行前端分頁(yè)

但是，這個(gè)是表格分頁(yè)，也就是說(shuō)，如果不是表格那就沒(méi)用了，剛好…我的業(yè)務(wù)就不是表格..那么只能看插件源碼修改了，改的面目全非后，上個(gè)廁所回來(lái)，想到了更好的辦法，于是刪除…

解決辦法：先思考分頁(yè)是為了什么？呈現(xiàn)想看的頁(yè)面，隱藏不想看的。沒(méi)錯(cuò)，可以利用CSS的display屬性

版本

Bootstrap-3.3.0

jQuery-1.11.3

代碼

JavaScript

<script type="text/javascript">
//上一頁(yè)
function previous(){
//當(dāng)前頁(yè)-1
new_page = parseInt($('#current_page').val()) - 1;
go_to_page(new_page);
}
//下一頁(yè)
function next(){
//當(dāng)前頁(yè)+1
new_page = parseInt($('#current_page').val()) + 1;
go_to_page(new_page);
}
//跳轉(zhuǎn)某一頁(yè)
function go_to_page(page_num){
$('.page_link[longdesc=' + page_num +']').parent().addClass('active').siblings('.active').removeClass('active');
//獲取隱藏域中頁(yè)數(shù)大?。宽?yè)多少條數(shù)據(jù)）
var show_per_page = parseInt($('#show_per_page').val());
//得到元素從哪里開(kāi)始的片數(shù)（點(diǎn)擊頁(yè) * 頁(yè)大?。┤琰c(diǎn)擊第5頁(yè)，5條/頁(yè)。則開(kāi)始為25
start_from = page_num * show_per_page;
//得到結(jié)束片的元素?cái)?shù)量，如果開(kāi)始為25，5條/頁(yè)，則結(jié)束為30
end_on = start_from + show_per_page;
//隱藏所有子div元素的內(nèi)容,顯示具體片數(shù)據(jù)，如顯示25~30
$('#datas').children().css('display', 'none').slice(start_from, end_on).css('display', 'inline-block');
//每頁(yè)顯示的數(shù)目
var show_per_page = 10;
//獲取總數(shù)據(jù)的數(shù)量
var number_of_items = $('#topics').children().size();
//計(jì)算頁(yè)數(shù)
var number_of_pages = Math.ceil(number_of_items/show_per_page);
//在頁(yè)數(shù)區(qū)域內(nèi)則做頁(yè)偏移
if( (page_num >= 2) && (page_num <= (number_of_pages - 3)) ){
//生成分頁(yè)->上一頁(yè)
var page_info = '<li><a class="previous_link" href="javascript:previous();">&laquo;</a></li>';
var p = page_num;
var i = page_num - 2;
var j = page_num + 2;
//生成分頁(yè)->前2頁(yè)
while(page_num > i){
page_info += '<li><a class="page_link" href="javascript:go_to_page(' + i +')" longdesc="' + i +'">'+ (i + 1) +'</a></li>';
i++;
}
//生成分頁(yè)->當(dāng)前頁(yè)
page_info += '<li><a class="page_link" href="javascript:go_to_page(' + page_num +')" longdesc="' + page_num +'">'+ (page_num + 1) +'</a></li>';
//生成分頁(yè)->后2頁(yè)
while(p < j){
if(p == number_of_pages){
break;
}
page_info += '<li><a class="page_link" href="javascript:go_to_page(' + (p + 1) +')" longdesc="' + (p + 1) +'">'+ (p + 2) +'</a></li>';
p++;
}
//生成分頁(yè)->下一頁(yè)
page_info += '<li><a class="next_link" href="javascript:next();">&raquo;</a></li>';
//加載分頁(yè)
$('.pagination').html(page_info);
$('.page_link[longdesc=' + page_num +']').parent().addClass('active').siblings('.active').removeClass('active');
}
else{ //否則不偏移
//激活某一頁(yè)，使得顯示某一頁(yè)
$('.page_link[longdesc=' + page_num +']').parent().addClass('active').siblings('.active').removeClass('active');
}
//更新隱藏域中當(dāng)前頁(yè)
$('#current_page').val(page_num);
}
$(function(){
//每頁(yè)顯示的數(shù)目
var show_per_page = 10;
//獲取話(huà)題數(shù)據(jù)的數(shù)量
var number_of_items = $('#datas').children().size();
//計(jì)算頁(yè)數(shù)
var number_of_pages = Math.ceil(number_of_items/show_per_page);
//設(shè)置隱藏域默認(rèn)值
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
//生成分頁(yè)->上一頁(yè)
var page_info = '<li><a class="previous_link" href="javascript:previous();">&laquo;</a></li>';
var current_link = 0;
//生成分頁(yè)->頁(yè)數(shù)
while(number_of_pages > current_link){
if(current_link == 5){
break;
}
page_info += '<li><a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a></li>';
current_link++;
}
//生成分頁(yè)->下一頁(yè)
page_info += '<li><a class="next_link" href="javascript:next();">&raquo;</a></li>';
//加載分頁(yè)
$('.pagination').html(page_info);
//生成分頁(yè)->左側(cè)總數(shù)
$("#data-total-page").html(show_per_page+"條/頁(yè)，共"+number_of_pages+"頁(yè)")
//激活第一頁(yè)，使得顯示第一頁(yè)
$('#data-pagination li').eq(1).addClass('active');
//隱藏該對(duì)象下面的所有子元素
$('#datas').children().css('display', 'none');
//顯示第n（show_per_page）元素
$('#datas').children().slice(0, show_per_page).css('display', 'inline-block');
});
</script>

HTML

<!-- 數(shù)據(jù) -->
<div id="datas">
<?php
foreach($data as $v)
{
echo '<div class="data">
<div class="data-info">
<div class="data-name">' + $v['name'] + '</div>
<div class="data-blog">' + $v['blog'] + '</div>
</div>
</div>
';
}
?>
</div>
<!-- 分頁(yè) -->
<input type="hidden" id="current_page" value="0">
<input type="hidden" id="show_per_page" value="0">
<div id="data-page-info">
<div id="data-total-page"></div>
<div id="data-pagination">
<ul class="pagination"></ul>
</div>
</div>

效果如下

動(dòng)態(tài)切換

以上所述是小編給大家介紹的基于Bootstrap和jQuery構(gòu)建前端分頁(yè)工具實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: