【转载】jquery插件--简单的分页插件

jquery提供很方法的js插件开发函数，关于jquery插件的开发教程，可以参考博主的上一篇博文《jQuery插件开发精品教程》，这里就不再重复。

由于项目中经常会使用到分页显示列表数据，这里就会用到关于一组分页按钮，之前的分页按钮是通过jsp的自定义标签来实现的一组分页按钮，关于jsp的自定义标签流程，可以参考《周记（jsp自定义标签）》。接触了jquery插件开发后，觉的js插件，不管是使用还是管理，或者是二次开发，都比jsp的自定义标签使用起来方便，这里就通过js的插件形势编写分页按钮组。

具体js插件代码如下：

[javascript] view plain copy

;(function($,window,document,undefined){
//自定义对象构造器
var SimplePaging = function(ele,opt){
this.$element = ele;
this.defaults = {
\'test\':"aaa",
//必须参数
\'cPage\':1, //当前页码
\'tPage\':1, //总页数
\'clickFun\':null, //点击调用的函数名
//可选参数
\'space\':10, //页面间距
\'showLast\':true, //是否显示第一页和最后页按钮组 true为显示
\'showNext\':true, //是否显示下一页和上一页按钮组 true为显示
\'div\':{
\'float\':\'right\',
\'font-size\':\'14px\',
\'-moz-user-select\': \'none\',
\'-webkit-user-select\':\'none\',
\'-ms-user-select\':\'none\',
\'-khtml-user-select\':\'none\',
\'user-select\':\'none\'
},
\'btn\':{
\'display\':\'inline-block\',
\'position\': \'relative\',
\'padding\':\'0 5px\',
\'letter-spacing\':\'0px\',
\'cursor\':\'pointer\',
},
\'btnOver\':{
\'top\':\'-1px\',
},
\'btnOut\':{
\'top\':\'0px\',
},
\'btnAction\':{
\'display\':\'inline-block\',
\'position\': \'relative\',
\'padding\':\'0 5px\',
\'letter-spacing\':\'0px\',
\'color\':\'#EA8010\',
\'top\':\'-1px\',
\'cursor\':\'default\',
},
};
this.options = $.extend({},this.defaults,opt);
};
//自定义对象方法
SimplePaging.prototype = {
test:function(){
this.$element.html(this.options.test);
return this.$element;
},
writePageBtn:function(){ // 1 10 20 30 31 32 33 34 35 36 37 38 39 40 50 60 ...
var cPage = this.options.cPage;
var tPage = this.options.tPage;
var space = this.options.space;
var funName = this.options.clickFun;
var c = Math.ceil(cPage/space);
//var l = Math.ceil(tPage/space);
var id = this.$element.prop("id");
var pageDiv = \'\';
//第一页
if(this.options.showLast){
pageDiv = pageDiv + \'<span class="pageSpan_\'+id+\'" onclick="\'+funName+\'(1)">|<</span>\';
}
//上一页
if(this.options.showNext){
if(cPage>1){
pageDiv = pageDiv + \'<span class="pageSpan_\'+id+\'" onclick="\'+funName+\'(\'+(cPage-1)+\')"><<</span>\';
}else{
pageDiv = pageDiv + \'<span class="pageSpan_\'+id+\'" onclick="javascript:confirm(\\'当前已为第一页\\');"><<</span>\';
}
}
//前期页区间前部分
for(var i=1;i<c;i++){
pageDiv = pageDiv + \'<span class="pageSpan_\'+id+\'" onclick="\'+funName+\'(\'+(i*space)+\')">\'+(i*space)+\'</span>\';
}
//当前页区间部分
for(var i=(c-1)*space+1;i<=c*space&&i<=tPage;i++){
//i = (i==0)?1:i; //i=0时从1开始
if(cPage==i){
pageDiv = pageDiv + \'<span class="actionPageSpan_\'+id+\'">\'+i+\'</span>\';
}else{
pageDiv = pageDiv + \'<span class="pageSpan_\'+id+\'" onclick="\'+funName+\'(\'+i+\')">\'+i+\'</span>\';
}
}
//当前页区间后部分
for(var i=c+1;i*space<=tPage;i++){
pageDiv = pageDiv + \'<span class="pageSpan_\'+id+\'" onclick="\'+funName+\'(\'+(i*space)+\')">\'+(i*space)+\'</span>\';
}
//下一页
if(this.options.showNext){
if(cPage<tPage){
pageDiv = pageDiv + \'<span class="pageSpan_\'+id+\'" onclick="\'+funName+\'(\'+(cPage+1)+\')">>></span>\';
}else{
pageDiv = pageDiv + \'<span class="pageSpan_\'+id+\'" onclick="javascript:confirm(\\'当前已为最后一页\\');">>></span>\';
}
}
//最后页
if(this.options.showLast){
pageDiv = pageDiv + \'<span class="pageSpan_\'+id+\'" onclick="\'+funName+\'(\'+tPage+\')">>|</span>\';
}
this.$element.html(pageDiv);
//设置相关样式
var div = $.extend({},this.defaults.div,this.options.div);
this.$element.css(div);
var btn = $.extend({},this.defaults.btn,this.options.btn);
this.$element.find(".pageSpan_"+id).css(btn);
var obj = this;
this.$element.find(".pageSpan_"+id).hover(function(){
var btnOver = $.extend({},obj.defaults.btnOver,obj.options.btnOver);
$(this).css(btnOver);
},function(){
var btnOut = $.extend({},obj.defaults.btnOut,obj.options.btnOut);
$(this).css(btnOut);
});
this.$element.find(".actionPageSpan_"+id).css(this.options.btnAction);
}
};
//添加插件到jQuery
$.fn.simplePaging = function(options){
var simplePaging = new SimplePaging(this,options);
return simplePaging.writePageBtn();
};
})(jQuery,window,document);

注意：该js插件是基于jquery开发的，使用时需先导入jquery

简单使用代码：

[html] view plain copy

<html>
<script src="jquery-1.10.2.js" ></script>
<script src="simplePaging.js"></script>
<script type="text/javascript">
function load(){
var param = {
"cPage":1,
"tPage":54,
"clickFun":"test", //该函数接受一个cPage参数
"showLast":false,
"div":{"float":"left"}
};
$("#testDiv").simplePaging(param);
}
function test(cPage){
//业务代码块
//分页按钮组控制块
var param = {
"cPage":cPage,
"tPage":54,
"clickFun":"test",
"showLast":false,
"div":{"float":"left"}
};
$("#testDiv").simplePaging(param);
}
</script>
<body onload="load()">
<div id="testDiv">
</div>
</body>
</html>

效果：

插件参数说明：

this.defaults = {
\'test\':"aaa", //开发测试参数，无任何意义
//必须参数
\'cPage\':1, //显示的当前页码
\'tPage\':1, //显示的总页数
\'clickFun\':null, //点击页码调用的函数名，该函数默认接受一个cPage参数
//可选参数
\'space\':10, //隐藏页码的间距
\'showLast\':true, //是否显示第一页和最后页按钮组 true为显示
\'showNext\':true, //是否显示下一页和上一页按钮组 true为显示
\'div\':{ }, //分页按钮组div的css样式
\'btn\':{ }, //分页按钮组div中的页码按钮的css样式
\'btnOver\':{ }, //鼠标浮在页码按钮上是页码按钮的css样式
\'btnOut\':{ }, //鼠标离开页码按钮后页码按钮的css样式
\'btnAction\':{}, //当前页码按钮的页码css样式
};
//该参数为默认参数，可以根据需要二次开发，自定义参数

实际项目中的效果图