js分頁器詳解

小云云
發布: 2018-03-27 17:10:57
原創
1859 人瀏覽過

本文主要跟大家分享js分頁器詳解,我們先來看看效果,希望能幫助大家。

依賴:bootstrap 和jquery

html程式碼:透過class="pj_pager"引用,pj_total初始化總條數

登入後複製

js程式碼:

/** * 分页器,依赖于bootstrap,jquery */ var pager = { init : function(r) { this.obj = $(".pj_pager"); this.total = Number(this.obj.attr("pj_total")); this.rows = r != undefined ? r : 10;// Number(this.obj.find(.page-count).html()) this.page = 1; this.initpagecount = 10; this.pages = parseInt(this.total / pager.rows) + (pager.total % pager.rows > 0 ? 1 : 0); this.maxpages = this.pages > this.initpagecount ? this.initpagecount : this.pages; this.outnumber = this.pages > this.initpagecount ? true : false; this.start = 1; this.end = this.start + (this.maxpages - 1); this.html(); }, next : function() { this.obj.find(".pj_next").click(function() { if (pager.pages > pager.page) { pager.page++; pager.html(); } }); }, prov : function() { this.obj.find(".pj_prov").click(function() { if (pager.page > 1) { pager.page--; pager.html(); } }); }, first : function() { this.obj.find(".first").click(function() { if (pager.page != 1) { pager.page = 1; pager.html(); } }); }, last : function() { this.obj.find(".last").click(function() { if (pager.page != pager.pages) { pager.page = pager.pages; pager.html(); } }); }, jump : function() { this.obj.find(".jump").click(function() { var p = $(this).prev("input").val(); if (p != '' && Number(p) <= pager.pages) { pager.page = Number(p); pager.html(); } }); }, setOutnumber : function() { if (this.pages > this.initpagecount) { if (this.end < this.page || this.start > this.page) { this.start = parseInt((this.page - 1) / this.initpagecount) * this.initpagecount + 1; this.end = this.start + this.initpagecount - 1; if (this.pages - this.start < this.initpagecount) { this.outnumber = false; this.end = this.start + pager.total % pager.rows - 1; } else { this.outnumber = true; } } } }, selectRows : function() { $(".dropdown-menu li").click( function() { // pager.rows = Number($(this).find("a").html()); // pager.page = 1; pager.init(Number($(this).find("a").html())); $(this).parent("ul").prev("button").children("em").html( $(this).find("a").html()); }); }, html : function() { this.setOutnumber(); var html = ''; html += ''; html += ''; html += ''; html += ''; if (this.pages > 0) { for (var i = this.start; i <= this.end; i++) { var cls = (i == this.page ? 'btn-success' : 'btn-default'); html += ''; } if (this.outnumber) { html += ''; } } html += ''; html += ''; html += ''; html += ''; html += ' ' + this.total + ''; html += '' + this.pages + ''; this.obj.html(html); this.next(); this.prov(); this.first(); this.last(); this.jump(); this.selectRows(); } } $(function() { pager.init(); })
登入後複製

以上是js分頁器詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!