自编基于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= ...

随机推荐

leveldb源码分析—Recover和Repair
leveldb作为一个KV存储引擎将数据持久化到磁盘,而对于一个存储引擎来说在存储过程中因为一些其他原因导致程序down掉甚至数据文件被破坏等都会导致程序不能按正常流程再次启动.那么遇到这些状况以后如 ...
【linux】spinlock 的实现
一.什么是spinlock spinlock又称自旋锁,是实现保护共享资源而提出一种锁机制.自旋锁与互斥锁比较类似,都是为了解决对某项资源的互斥使用无论是互斥锁,还是自旋锁,在任何时刻,最多只能有一 ...
MFC分类
屏幕截图(带光标) MFC Button控件自绘 WM_CTLCOLOR消息 MFC窗口创建.销毁消息流程 DDX_Control.SubclassWindow和SubclassDlgItem 隐藏系 ...
SQL Server游标的使用【转】
游标是邪恶的! 在关系数据库中,我们对于查询的思考是面向集合的.而游标打破了这一规则,游标使得我们思考方式变为逐行进行.对于类C的开发人员来着,这样的思考方式会更加舒服. 正常面向集合的思维方式是: ...
用WPF做了几个小游戏
最近看书看累了,参考别人的代码(其实差不多就是把代码重新打了一遍o(╯□╰)o),用wpf做了个<2048>小游戏,顺便在<Git教程>学习下git,也顺便把在<写让别人 ...
Error && MFC
Error:MSB6006 "rc.exe" exited with code 2. 目录含有中文 Error:no instance of overloaded function ...
《JavaScript修炼之道》读书笔记
1.参考书目入门:<JavaScript DOM编程艺术>第二版进阶:<JavaScript高级程序设计>第二版.<JavaScript编程精粹> <Ja ...
find type d 命令批量删除禁用
[root@qike ~]# find /usr/local/sbin/ -type d /usr/local/sbin//usr/local/sbin/2/usr/local/sbin/g/u ...
如何做好presentation
1.全心投入要么不做,要做就做好承诺自己会花时间好好准备自己的演讲,投入专注的精力. 人们可以通过练习使自己成为很好的演讲者. 2分析你的观众他们想听什么? 3.组织你的想法让语言简单让观众 ...
hdu-5521 Meeting(最短路)
题目链接: Meeting Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) ...

自编基于jQuery实现分页插件

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

随机推荐

热门专题