html 分页_JQuery堪称完美的分页函数
生活随笔
收集整理的這篇文章主要介紹了
html 分页_JQuery堪称完美的分页函数
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
演示效果：
html部分（引入jquery.js）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery簡單的分頁插件</title> </head><link rel="stylesheet" href="css/pagination.css" /><script src="/uploads/allimg/200420/150KI242-1.jpg"></script> <script src="js/pagination.js"></script><body> <center> <div class="box" id="wrap1"></div> </center> <script type="text/javascript">var onPagechange = function(page){console.log('當前點擊頁碼',page);}var obj = {wrapid:'wrap1', //頁面顯示分頁器容器idtotal:18891,//總條數pagesize:10,//每頁顯示10條currentPage:1,//當前頁onPagechange:onPagechange,//btnCount:7 頁數過多時，顯示省略號的邊界頁碼按鈕數量，可省略，且值是大于5的奇數}pagination.init(obj); </script></body> </html>css部分
.pagination-btn{padding: 0.06rem 0.10rem;margin-right: 4px;border-radius: 4px;border: 1px solid #ccc;cursor: pointer;color: #999;display: inline-block;box-sizing: border-box;width: 44px;text-align: center; } .pagination-wrap{position: relative;display: inline-block;padding-left: 0px; } .pagination-ellipsis{color: #999;position: relative;top: -5px;display: inline-block;padding: 0 0.12rem;margin-right: 4px; } .pagination-current{border:1px solid #3E8DDD;color:#3E8DDD; } .pagination-disabled{cursor: not-allowed; } #pagination-next,#pagination-prev{padding-right:0.08rem;padding-left:0.08rem; } .pagenum{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;vertical-align: middle;}js部分
var pagination = pagination || {}; (function(){function Pagination(){}Pagination.prototype = {render: function(obj){/*顯示分頁器的容器元素id*/this._wrapid = '#'+obj.wrapid;this._total = obj.total;this._pagesize = obj.pagesize;this._currentPage = obj.currentPage;/*頁碼改變的回調函數*/this._cb = obj.onPagechange;/*設置頁碼超過多少個時，顯示省略號*/if(obj.btnCount<5){obj.btnCount = 5;}else if(obj.btnCount%2==0){//非奇數obj.btnCount = obj.btnCount+1;}this._btnsValue = obj.btnCount?obj.btnCount:7;/*頁碼過多，左右都存在省略號時，當前點擊頁碼左右兩邊的頁碼個數*/this._halfbtns = parseInt((this._btnsValue-3)/2);/*顯示的總頁面數*/this._btnNum = obj.total/obj.pagesize>parseInt(obj.total/obj.pagesize)?parseInt(obj.total/obj.pagesize)+1:parseInt(obj.total/obj.pagesize); },bindEvent: function(){var that = this;/*頁碼點擊*/$(that._wrapid).on('click','.pagenum',function(){that._currentPage = parseInt($(this).text());that._cb(that._currentPage);isshowMore.call(that);});/*上一頁*/$(that._wrapid).on('click','#pagination-prev',function(){if($(this).hasClass('pagination-disabled')){return;}that._currentPage--;$('#pagination-next').hasClass('pagination-disabled')&&$('#pagination-next').removeClass('pagination-disabled');if(that._currentPage==1){$('#pagination-prev').addClass('pagination-disabled');}else{$('#pagination-prev').removeClass('pagination-disabled');}that._cb(that._currentPage);isshowMore.call(that);});/*下一頁*/$(that._wrapid).on('click','#pagination-next',function(){if($(this).hasClass('pagination-disabled')){return;}that._currentPage++;$('#pagination-prev').hasClass('pagination-disabled')&&$('#pagination-prev').removeClass('pagination-disabled');if(that._currentPage==that._btnNum){$('#pagination-next').addClass('pagination-disabled');}else{$('#pagination-next').removeClass('pagination-disabled')}that._cb(that._currentPage);isshowMore.call(that);});isshowMore.call(this);/*判斷省略符位置*/function isshowMore(){if(this._btnNum<=this._btnsValue){// console.log('不顯示');creatBtns.call(this,'none')}else{if(this._currentPage<=(this._btnsValue-1-this._halfbtns)){//只顯示后省略creatBtns.call(this,'after');}else if(this._currentPage>=this._btnNum-1-this._halfbtns){//只顯示前省略creatBtns.call(this,'before')}else{//前后省略都顯示creatBtns.call(this,'all')}}}/*創建頁碼按鈕標簽*/function creatBtns(ismorePosition){var html = '';var ismore = '...';var firstbtn = '1';var lastbtn = ''+this._btnNum+'';var prevbtn = '<';var nextbtn = '>'if(this._currentPage == 1){firstbtn = '1';prevbtn = '<'}if(this._currentPage == this._btnNum){lastbtn = ''+this._btnNum+'';nextbtn = '>'}if(ismorePosition == 'none'){for(var i = 1; i <= this._btnNum; i++){if(i == this._currentPage){html+= ''+i+'';}else{html += ''+i+'';}}}if(ismorePosition=="after"){// console.log('省略在后面');for(var i = 1; i <= this._btnsValue-1; i++){if(i == this._currentPage){html += ''+i+'';}else{html += ''+i+'';}}html = html + ismore + lastbtn;}if(ismorePosition=="before"){// console.log('省略在前面');html = html + firstbtn + ismore;for(var i=this._btnNum-(this._btnsValue-2);i<=this._btnNum;i++){if(i == this._currentPage){html+=''+i+'';}else{html+=''+i+'';}}}if(ismorePosition=="all"){// console.log('省略前后都有');var halfnum = parseInt((this._btnsValue-3)/2);html += firstbtn + ismore;for(var i = (this._currentPage-halfnum);i<=this._currentPage+halfnum+((this._btnsValue-3)%2);i++){if(i == this._currentPage){html += ''+i+''}else{html += ''+i+''}}html+=ismore+lastbtn;}$(this._wrapid).html(prevbtn+' '+html+' '+nextbtn);}},init:function(paginationObj){this.render(paginationObj);this.bindEvent();}}pagination.init = function(paginationObj){/*參數：wrapid,total,pagesize,currentPage,onPagechange[,btnCount]*/return new Pagination().init(paginationObj)} })()總結
以上是生活随笔為你收集整理的html 分页_JQuery堪称完美的分页函数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于SSM框架的公交车调度管理系统
- 下一篇： c语言智能公交系统,基于单片机智能公交小