jq前端实现分页效果小插件

最近实现了一个分页的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"&g
95d7
t;</script>
<script src="page.js"></script>     2.css样式表，将需要分页的列表项全部隐藏

#demo>div{
display:none;
}

    3.html代码列子如下<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>4.调用方法实现分页

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);