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

 

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

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

具体js插件代码如下：

 

;(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>
<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样式
        };
//该参数为默认参数，可以根据需要二次开发，自定义参数

实际项目中的效果图