自编基于jQuery实现分页插件

$(function(){  

});

/**
    * @params dataUrl：请求数据url地址
    * @params countUrl：请求数据总数url地址
    * @params pageSize：每页显示数据条数
    * @params currentPage：当前页码
    * @params data：查询时的数据[JSON格式]
    * @params pageShowDivId：显示分页内容的div的id属性值
    * @params contentMark：内容信息标记
    * @params pageSkin：分页显示皮肤
    * @params styleType：模板种类[2种可选,1|2]
    * @function customMethod()：用户自定义函数,用于给分页中加入用户特有内容
    * LJM
*/
$.extend({
    page:function(options){

        //每次加载时,清空原有内容
        $("#"+options['pageShowDivId']).empty();

        //对data属性设置默认初始值
        if(options['data']==null||options['data']==""){
            options['data'] = '';
        }

        var reg = /^[0-9]*$/;
        //对currentPage属性设置默认初始值
        if(options['currentPage']==""||options['currentPage']<=0||options['currentPage']==null||!reg.test(parseInt(options['currentPage']))){
            options['currentPage'] = 1;
        }

        //对pageSize属性设置默认初始值
        if(options['pageSize']==null||options['pageSize']==""||!reg.test(parseInt(options['pageSize']))){
            options['pageSize'] = 16;
        }

        //对contentMark属性设置默认初始值
        if(options['contentMark']==null||options['contentMark']==""){
            options['contentMark'] = '条记录';
        }

        //对pageSkin属性设置默认初始值
        if(options['pageSkin']==null||options['pageSkin']==""){
            options['pageSkin'] = '#46c1de';
        }

        //对styleType属性设置默认初始值
        if(options['styleType']==null||options['styleType']==""||options['styleType']>2||!reg.test(parseInt(options['styleType']))){
            options['styleType'] = 1;
        }

        //请求数据
        $.ajax({
            url:options['dataUrl'],
            data:{pageNo:options['currentPage'],"pageSize":options['pageSize'],searchInfo:JSON.stringify(options['data'])},
            type:'post',
            async:false,
            cache:false,
            dataType:'json',
            success:function(data){
                //对于数据部分做处理
                if(null!=data[0].data){

                    if(typeof customMethod != undefined){
                        customMethod(data[0].data);
                    }

//                    if(jQuery.isFunction(customMethod)){
//                        customMethod(data[0].data);
//                    }
                }

                //对于总数部分做处理[分页效果展示]
                if(null!=data[0].count){
                    //页码总数
                    var pageNum = Math.ceil(data[0].count/options['pageSize']);

                    //模板种类1
                    if(options['styleType']==1||options['styleType']>2){
                        //临时当前页变量
//                        var currentPage = options.currentPage;
                        var currentPage = (pageNum>0)?options.currentPage:0;

                        $("#"+options['pageShowDivId']).append("共<strong>"+pageNum+"</strong>页<strong>"+data[0].count+"</strong>"+options['contentMark']+"&nbsp;&nbsp;当前第<strong>"+currentPage+"</strong>页&nbsp;&nbsp;");

                        //对于上一页按钮的控制
                        if(Number(currentPage)>1){
                            options.currentPage = (Number(currentPage)-1);
                            $("#"+options['pageShowDivId']).append("<a href=javascript:$.page("+JSON.stringify(options)+")>上一页</a>");
                        }else{
                            $("#"+options['pageShowDivId']).append("<span>上一页</span>");
                        }

                        //对于下一页按钮的控制
                        if(Number(currentPage)<pageNum){
                            options.currentPage = (Number(currentPage)+1);
                            $("#"+options['pageShowDivId']).append('<a href=javascript:$.page('+JSON.stringify(options)+')>下一页</a>');
                        }else{
                            $("#"+options['pageShowDivId']).append("<span>下一页</span>");
                        }

                        //添加自定义跳转按钮
                        $("#"+options['pageShowDivId']).append("<input type='text' id='simopePageTxt' maxLength='5' onChange=$.checkInputNum(this,'"+pageNum+"') onKeyup=$.checkInputNum(this,'"+pageNum+"') /><input type='button' id='simopePageBtn' value='GO' title='GO' canClick='false' onClick=$.turnToPage(this,"+JSON.stringify(options)+",'"+pageNum+"') />");

                        //添加CSS样式[1:引用模板1的样式]
                        $.cssStyle(options['pageShowDivId'],options['pageSkin'],1);

                    }else{
                        //将当前页临时存起来
                        var currentPage = options.currentPage;
                        $("#"+options['pageShowDivId']).append("<strong style='margin-right:10px;letter-spacing:3px;font-size:17px;color:#C2C3C7;'>共"+pageNum+"页</strong>");

                        //对于首页与上一页按钮的控制
                        if(currentPage>1){
                            options.currentPage = 1;
                            $("#"+options['pageShowDivId']).append("<span class='pageCommon' title='首页' onClick=$.page("+JSON.stringify(options)+")>首页</span>");
                            options.currentPage = Number(currentPage)-1;
                            $("#"+options['pageShowDivId']).append("<span class='pageCommon' title='上一页' onClick=$.page("+JSON.stringify(options)+")>上一页</span>");
                        }else{
                            $("#"+options['pageShowDivId']).append("<span>首页</span><span>上一页</span>");
                        }

                        //显示的页码数
                        var numOfPages = 10;
                        //当前页前面的页数
                        var prevPages = (parseInt(currentPage)-4)>0?4:(parseInt(currentPage)-1);
                        //当前页后面的页数
                        var nextPages = (parseInt(prevPages)+5)==9?5:(parseInt(numOfPages)-parseInt(prevPages)-1);

                        //对于总页数小于10页的情况下进行prevPages与nextPages控制
                        if(parseInt(pageNum)<parseInt(numOfPages)){
                            prevPages = parseInt(currentPage) - 1;
                            nextPages = parseInt(pageNum)-parseInt(prevPages)-1;
                        }

                        if(parseInt(currentPage)+parseInt(nextPages)>parseInt(pageNum)&&parseInt(pageNum)>=parseInt(numOfPages)){
                            nextPages = parseInt(pageNum)-parseInt(currentPage);
                            prevPages = parseInt(numOfPages)-parseInt(nextPages)-1;
                        }

                        //当前页码前面的页码数显示
                        for(var i=parseInt(currentPage)-parseInt(prevPages);i<currentPage;i++){
                            options.currentPage = i;
                            $("#"+options['pageShowDivId']).append("<span title='第"+i+"页' class='pageCommon' onClick=$.page("+JSON.stringify(options)+")>"+i+"</span>");
                        }

                        //当前页码后面的页码数显示
                        for(var i=currentPage;i<=parseInt(currentPage)+parseInt(nextPages);i++){
                            if(parseInt(i)==parseInt(currentPage)){
                                $("#"+options['pageShowDivId']).append("<span title='第"+i+"页' class='pageActive'>"+i+"</span>");
                            }else{
                                options.currentPage = i;
                                $("#"+options['pageShowDivId']).append("<span title='第"+i+"页' class='pageCommon' onClick=$.page("+JSON.stringify(options)+")>"+i+"</span>");
                            }
                        }

                        //对于下一页与尾页按钮的控制
                        if(currentPage<pageNum){
                            options.currentPage = Number(currentPage)+1;
                            $("#"+options['pageShowDivId']).append("<span class='pageCommon' title='下一页' onClick=$.page("+JSON.stringify(options)+")>下一页</span>");
                            options.currentPage = pageNum;
                            $("#"+options['pageShowDivId']).append("<span class='pageCommon' title='尾页' onClick=$.page("+JSON.stringify(options)+")>尾页</span>");
                        }else{
                            $("#"+options['pageShowDivId']).append("<span>下一页</span><span>尾页</span>");
                        }

                        //添加自定义跳转按钮
                        $("#"+options['pageShowDivId']).append("<input type='text' id='simopePageTxt' maxLength='5' onChange=$.checkInputNum(this,'"+pageNum+"') onKeyup=$.checkInputNum(this,'"+pageNum+"') /><input type='button' id='simopePageBtn' value='GO' title='GO' canClick='false' onClick=$.turnToPage(this,"+JSON.stringify(options)+",'"+pageNum+"') />");

                        //添加CSS样式[2:引用模板2的样式]
                        $.cssStyle(options['pageShowDivId'],options['pageSkin'],2);
                    }
                }
            },
            error:function(){
//                alert("data error")
            }
        });
    },
    cssStyle:function(obj,pageSkin,type){
        if(type==1){
            $("#"+obj).find("strong").css({"color":pageSkin,"margin":'0px 4px'});

            $("#"+obj).find("span").css({"color":'#D4D0D6',"margin":'0px 5px',"padding":'2px 7px'});

            $("#"+obj).find("a").css({"color":pageSkin,"margin":'0px 5px',"padding":'2px 7px'});

            $("#"+obj).find("input[type='text']").css({"width":'25px',"height":'17px',"text-align":'center',"border":'1px solid #ccc'});

            $("#"+obj).find("input[type='button']").css({"background":pageSkin,"border":'0px',"height":'21px',"margin-left":'5px',"color":'#fff'});

            $("#"+obj).find("a").mouseover(function(e){
                $(this).css({"background":pageSkin,"color":'#FFF'});
            });

            $("#"+obj).find("a").mouseout(function(e){
                $(this).css({"background":'#F0F4FB',"color":pageSkin});
            });
        }else if(type==2){
            $("#"+obj).find("span").css({"color":'#D4D0D6',"margin":'0px 3px',"padding":'5px 10px',"border":'1px solid #E1E2E3'});

            $("#"+obj).find("span[class='pageCommon']").css({"color":pageSkin,"cursor":'pointer',"background":'#fff'});

            $("#"+obj).find("span[class='pageActive']").css({"color":'#fff',"cursor":'pointer',"background":pageSkin});

            $("#"+obj).find("input[type='text']").css({"width":'25px',"height":'25px',"text-align":'center',"border":'1px solid #ccc',"margin-left":'10px'});

            $("#"+obj).find("input[type='button']").css({"background":pageSkin,"border":'0px',"height":'28px',"margin-left":'5px',"color":'#fff'});

            $("#"+obj).find("span[class='pageCommon']").mouseover(function(){
                $(this).css({"border-color":pageSkin,"background":'#F2F8FF'});
            });

            $("#"+obj).find("span[class='pageCommon']").mouseout(function(){
                $(this).css({"border-color":'#E1E2E3',"background":'#fff'});
            });
        }

    },
    checkInputNum:function(obj,pageNum){
        var reg = /^[0-9]*$/;
        var page = $(obj).val();
        if(!reg.test(page)){
            $(obj).val("");
            $("#simopePageBtn").attr("canClick",'false');
            return;
        }

        if(parseInt(page)<=0||parseInt(page)>parseInt(pageNum)){
            $(obj).val("");
            $("#simopePageBtn").attr("canClick",'false');
            return;
        }
        $("#simopePageBtn").attr("canClick",'true');
    },
    turnToPage:function(obj,options,pageNum){
        var flag = $(obj).attr("canClick");
        if(flag=='false'){
            return;
        }
        var pageNo = $("#simopePageTxt").val();
        if(parseInt(pageNo)<=0||parseInt(pageNo)>parseInt(pageNum)){
            return;
        }else{
            $.page({
                dataUrl:options['dataUrl'],
//                countUrl:options['countUrl'],
                data:options['data'],
                currentPage:Number(pageNo),
                pageSize:options['pageSize'],
                pageShowDivId:options['pageShowDivId'],
                contentMark:options['contentMark'],
                pageSkin:options['pageSkin'],
                styleType:options['styleType']
            });
        }
    }
});

我们都过分崇拜别人的代码,那是因为你在看不在写！！！

版权声明：本文为博主原创文章，未经博主允许不得转载。