jq前端實現分頁效果小外掛
阿新 • • 發佈：2019-01-02
最近實現了一個分頁的jq外掛分享出來。
一、需求
後端資料一股腦拋過來，列表形式顯示內容，由於資料量龐大，就考慮分頁實現了。本外掛宣告（未考慮效能問題，只是實現了相應功能）。
二、選擇
外掛開發最快速方法莫過於jquery的外掛開發功能
三、外掛原始碼奉上
(function($,window){ var Page = function(ele,opt){ this.$ele = ele; this.defaults ={ curPage: 1, totalPage: 1, totalCount: 0, morePage: opt.morePage, perPageCount: opt.perPageCount } this.options = $.extend({},this.defaults,opt); } Page.prototype = { init: function () { //資料初始化 this.dataInit(); //顯示當前頁數、總頁數 this.pageInit(); //分頁處理 this.pageFun(); //銷燬之前事件 this.offEventFun(); //事件處理 this.eventFun(); return this.$ele; }, pageInit: function () { $(this.options.curPageEl).html("當前第" + this.options.curPage + "頁"); $(this.options.totalEl).html("共" + this.options.totalPage + "頁"); }, pageFun: function () { var $list = this.$ele.children(); $list.hide(); var start = (this.options.curPage - 1) * this.options.perPageCount; if (this.options.curPage == this.options.totalPage) { var end = $list.length; for (var i = start; i < end; i++) { $($list[i]).show(); } } else { for (var i = start; i < start + this.options.perPageCount; i++) { $($list[i]).show(); } } this.pageInit(); } , dataInit: function () { var $list = this.$ele.children(); this.options.curPage = 1; this.options.totalCount = $list.length; this.options.totalPage = Math.ceil($list.length / this.options.perPageCount); }, eventFun:function(){ //下一頁 var self = this; $(this.options.next).on("click", function () { if (self.options.curPage + 1 > self.options.totalPage) { alert("已經是最後一頁"); return; } self.options.curPage++; self.pageFun(); }); //上一頁 $(this.options.prev).on("click", function () { if (self.options.curPage - 1 < 1) { alert("已經是第一頁"); return; } self.options.curPage--; self.pageFun(); }); //下n頁 $(this.options.nextMore).on("click", function () { if (self.options.curPage + self.options.morePage > self.options.totalPage){ self.options.curPage = self.options.totalPage; alert("已經是最後一頁") }else{ self.options.curPage += self.options.morePage; } self.pageFun(); }); //上n頁 $(this.options.prevMore).on("click", function () { if (self.options.curPage - self.options.morePage < 1){ self.options.curPage = 1; alert("已經是第一頁") }else{ self.options.curPage -= self.options.morePage; } self.pageFun(); }); }, offEventFun:function(){ $(this.options.next).off("click"); $(this.options.prev).off("click"); $(this.options.nextMore).off("click"); $(this.options.prevMore).off("click"); } } $.fn.page = function(options){ var page = new Page(this,options); return page.init(); } })(jQuery,window)
四、用法
1.頁面頭部引入
<script src="jquery-1.11.0.min.js"></script>
<script src="page.js"></script>#demo>div{
display:none;
}
3.html程式碼列子如下
4.呼叫方法實現分頁<div id="demo"> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> <div>123456</div> </div> <span class="next">下一頁</span> <span class="prev">上一頁</span> <span class="nextMore">下5頁</span> <span class="prevMore">上5頁</span> <span class="total"></span> <span class="cur_page"></span>
var pageParam = { next: '.next',//下一頁按鈕jq選擇器 prev: '.prev',//上一頁按鈕jq選擇器 nextMore: '.nextMore',//下n頁按鈕jq選擇器 prevMore: '.prevMore',//上n頁按鈕jq選擇器 totalEl: '.total',//總頁數jq元素 元素內包含 eq:“共n頁” curPageEl: '.cur_page',//當前頁數jq元素 元素內包含 eq:“當前第n頁” perPageCount: 4,//每頁顯示數量 morePage: 5//上、下n頁跳轉數 } //demo為包裹列表的容器 $("#demo").page(pageParam);