自编基于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']

            });

        }

    }

});

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

自编基于jQuery实现分页插件的更多相关文章

一款基于jQuery的分页插件
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
基于jquery 的分页插件，前端实现假分页效果
上次分享了一款jquery插件,现在依旧分享这个插件,不过上一次分享主要是用于regular框件,且每一页数据都是从后端获取过来的,这一次的分享主要是讲一次性获取完数据然后手动进行分页.此需求基本上 ...
转：精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
12款优秀 jQuery Ajax 分页插件和教程
12款优秀 jQuery Ajax 分页插件和教程在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...
bootstrap-paginator基于bootstrap的分页插件
bootstrap-paginator基于bootstrap的分页插件 GitHub 官网地址:https://github.com/lyonlai/bootstrap-paginator 步骤引包 ...
基于vue的分页插件
相信大家用过很多jquery的分页插件,那这次就用一用基于vue的分页插件. 这里的环境用的是springboot 首先要引入pagehelper的jar文件,版本是1.2.3,配置文件也需要配置一下 ...
jQuery Pagination分页插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Jquery的分页插件
Jquery的分页插件, 用起来还不错. 来自: http://flaviusmatis.github.io/simplePagination.js/ 下载地址: https://github.c ...
基于jquery下拉列表树插件代码
分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框下拉树代码下载.效果图如下: 在线预览源码下载实现的代码. html代码: <table width= ...

随机推荐

mysql由浅入深探究（一）----数据库简介与mysql安装
mysql简介: 首先谈到mysql,我们要知道这是一个开源的数据库,与开源对应的就是free,但这并不意味着其性能会比很差,mysql同样能支持千万级以上的大数据量,甚至更多.同时mysql还支持许 ...
关于String对象的比较
1.String对象的比较 String 是一个常量,从String类中的代码可以看出.String类内部是通过char数组来存储字符串,这个char数组是被声明成final的. // Java中只要 ...
如何通过js实现图片预览功能
一.效果预览效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
CentOS下SSH无密码登录的配置
1.确认本机sshd的配置文件(需要root权限) $ gedit /etc/ssh/sshd_config 找到以下内容,并去掉注释符"#" RSAAuthentication ...
phpcmsv9 标题颜色显示问题
在解决标题颜色问题之前首先要注意到标题字段为title,副标题为fu_title. 如果一个文章想在首页推荐,又想在栏目首页推荐,并且这两个推荐位置的标题长度不一样,那只能用副标题区别,这样就可以在 ...
我的NopCommerce之旅(6): 应用启动
一.基础介绍 Global.asax 文件(也称为 ASP.NET 应用程序文件)是一个可选文件,该文件包含响应 ASP.NET 或 HTTP 模块所引发的应用程序级别和会话级别事件的代码. Appl ...
【ASP.NET 进阶】无刷新上传图片之一：利用一般处理程序
效果图: 源代码地址:https://github.com/YeXiaoChao/UploadThePic
n个整数中，找出尽可能多的数使他们组成一个等差数列，求最长等差数列的长度
例子: 3,8,4,5,6,2 返回值应该为 :5 这是昨天做的一道优酷土豆的编程题,和leetcode中的128/ Longest Consecutive Sequence 有点 ...
Flash剪贴板功能
做JS的都知道,如果不考虑浏览器的兼容问题,其实,JS本身的window.clipboardData对象是可以做到复制内容到剪贴板的功能,但除了IE浏览器,FF和Chrome浏览器都不支持.现在为了浏 ...
Android 手势识别类 ( 二 ) GestureDetector 源码浅析
前言:Android 关于手势的操作提供两种形式:一种是针对用户手指在屏幕上划出的动作而进行移动的检测,这些手势的检测通过android提供的监听器来实现:另一种是用户手指在屏幕上滑动而形成一定的不 ...

自编基于jQuery实现分页插件

自编基于jQuery实现分页插件的更多相关文章

随机推荐

热门专题