基于Bootstrap和jQuery構(gòu)建前端分頁工具實例代碼
前言
為啥名字叫【前端分頁工具】?因為我實在想不到什么好名字,如果想要更加貼切的理解這個工具,應(yīng)該從業(yè)務(wù)來看
業(yè)務(wù)是這樣的,有一個數(shù)據(jù)從后臺傳到前臺,因為數(shù)據(jù)量不大,因此傳過來之后直接顯示即可,但是=。=所謂的數(shù)據(jù)量不大,最多也達到成百上千條,不可能全部顯示出來,那么就需要分頁
常規(guī)的分頁是利用Ajax,通過傳頁偏移量到后臺,后臺查詢數(shù)據(jù)庫再返回數(shù)據(jù),可以實現(xiàn)無刷新分頁,拿到的數(shù)據(jù)也是最新的
前端分頁
優(yōu)點:一次傳輸數(shù)據(jù),避免用戶反復(fù)請求服務(wù)器,減少網(wǎng)絡(luò)帶寬、服務(wù)器調(diào)度壓力、數(shù)據(jù)庫查詢、緩存查詢壓力
缺點:有新數(shù)據(jù)無法實時更新,除非用戶重新請求數(shù)據(jù)
過程
剛開始我不希望造輪子,想盡快完成,于是找了很久Bootstrap的工具,找到了一個BootstrapTable,這個插件很強大,除了可以使用常規(guī)的方式分頁,還可以指定數(shù)據(jù)(json),進行前端分頁
但是,這個是表格分頁,也就是說,如果不是表格那就沒用了,剛好…我的業(yè)務(wù)就不是表格..那么只能看插件源碼修改了,改的面目全非后,上個廁所回來,想到了更好的辦法,于是刪除…
解決辦法:先思考分頁是為了什么?呈現(xiàn)想看的頁面,隱藏不想看的。沒錯,可以利用CSS的display屬性
版本
Bootstrap-3.3.0
jQuery-1.11.3
代碼
JavaScript
<script type="text/javascript"> //上一頁 function previous(){ //當前頁-1 new_page = parseInt($('#current_page').val()) - 1; go_to_page(new_page); } //下一頁 function next(){ //當前頁+1 new_page = parseInt($('#current_page').val()) + 1; go_to_page(new_page); } //跳轉(zhuǎn)某一頁 function go_to_page(page_num){ $('.page_link[longdesc=' + page_num +']').parent().addClass('active').siblings('.active').removeClass('active'); //獲取隱藏域中頁數(shù)大?。宽摱嗌贄l數(shù)據(jù)) var show_per_page = parseInt($('#show_per_page').val()); //得到元素從哪里開始的片數(shù)(點擊頁 * 頁大?。┤琰c擊第5頁,5條/頁。則開始為25 start_from = page_num * show_per_page; //得到結(jié)束片的元素數(shù)量,如果開始為25,5條/頁,則結(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'); //每頁顯示的數(shù)目 var show_per_page = 10; //獲取總數(shù)據(jù)的數(shù)量 var number_of_items = $('#topics').children().size(); //計算頁數(shù) var number_of_pages = Math.ceil(number_of_items/show_per_page); //在頁數(shù)區(qū)域內(nèi)則做頁偏移 if( (page_num >= 2) && (page_num <= (number_of_pages - 3)) ){ //生成分頁->上一頁 var page_info = '<li><a class="previous_link" href="javascript:previous();">«</a></li>'; var p = page_num; var i = page_num - 2; var j = page_num + 2; //生成分頁->前2頁 while(page_num > i){ page_info += '<li><a class="page_link" href="javascript:go_to_page(' + i +')" longdesc="' + i +'">'+ (i + 1) +'</a></li>'; i++; } //生成分頁->當前頁 page_info += '<li><a class="page_link" href="javascript:go_to_page(' + page_num +')" longdesc="' + page_num +'">'+ (page_num + 1) +'</a></li>'; //生成分頁->后2頁 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++; } //生成分頁->下一頁 page_info += '<li><a class="next_link" href="javascript:next();">»</a></li>'; //加載分頁 $('.pagination').html(page_info); $('.page_link[longdesc=' + page_num +']').parent().addClass('active').siblings('.active').removeClass('active'); } else{ //否則不偏移 //激活某一頁,使得顯示某一頁 $('.page_link[longdesc=' + page_num +']').parent().addClass('active').siblings('.active').removeClass('active'); } //更新隱藏域中當前頁 $('#current_page').val(page_num); } $(function(){ //每頁顯示的數(shù)目 var show_per_page = 10; //獲取話題數(shù)據(jù)的數(shù)量 var number_of_items = $('#datas').children().size(); //計算頁數(shù) var number_of_pages = Math.ceil(number_of_items/show_per_page); //設(shè)置隱藏域默認值 $('#current_page').val(0); $('#show_per_page').val(show_per_page); //生成分頁->上一頁 var page_info = '<li><a class="previous_link" href="javascript:previous();">«</a></li>'; var current_link = 0; //生成分頁->頁數(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++; } //生成分頁->下一頁 page_info += '<li><a class="next_link" href="javascript:next();">»</a></li>'; //加載分頁 $('.pagination').html(page_info); //生成分頁->左側(cè)總數(shù) $("#data-total-page").html(show_per_page+"條/頁,共"+number_of_pages+"頁") //激活第一頁,使得顯示第一頁 $('#data-pagination li').eq(1).addClass('active'); //隱藏該對象下面的所有子元素 $('#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> <!-- 分頁 --> <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>
效果如下
動態(tài)切換
以上所述是小編給大家介紹的基于Bootstrap和jQuery構(gòu)建前端分頁工具實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jquery實現(xiàn)Slide Out Navigation滑出式菜單效果代碼
這篇文章主要介紹了jquery實現(xiàn)Slide Out Navigation滑出式菜單效果代碼,涉及jquery基于鼠標事件操作頁面元素動態(tài)變換的技巧,需要的朋友可以參考下2015-09-09基于jQuery實現(xiàn)火焰燈效果導(dǎo)航菜單
這篇文章主要介紹了jQuery實現(xiàn)火焰燈效果導(dǎo)航菜單的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01使用jquery DataTable和ajax向頁面顯示數(shù)據(jù)列表的方法
今天小編就為大家分享一篇使用jquery DataTable和ajax向頁面顯示數(shù)據(jù)列表的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08Jquery使用each函數(shù)實現(xiàn)遍歷及數(shù)組處理
這篇文章主要介紹了Jquery使用each函數(shù)實現(xiàn)遍歷及數(shù)組處理,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07基于jQuery實現(xiàn)列表循環(huán)滾動小技巧(超簡單)
只要能夠不停地把第一個item移動到末尾,其余的自會往上填補空缺,填補的過程用動畫放慢些,就能有不斷滾動的視覺效果了,這種效果基于jquery怎么實現(xiàn)呢?下面小編給大家?guī)砹薺Query列表循環(huán)滾動效果的實現(xiàn)思路代碼,一起看看吧2021-08-08jQuery的實現(xiàn)原理的模擬代碼 -2 數(shù)據(jù)部分
在 jQuery 中,可以對每一個 DOM 對象保存私有的數(shù)據(jù)。2010-08-08