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

随机推荐

Effective Java 58 Use checked exceptions for recoverable conditions and runtime exceptions for programming errors
Three kinds of throwables Throwables Checked Recoverable checked exceptions Y Y runtime exceptions N ...
javascript元素绑定事件
js元素绑定事件想给一个元素绑定一个方法之后,在绑定一个方法而且不被覆盖 window.onload = function () { alert('a'); } window.onlaod=fu ...
MyCat 学习笔记第十二篇.数据分片之分片事务处理
1 环境说明 VM 模拟3台MYSQL 5.6 服务器 VM1 192.168.31.187:3307 VM2 192.168.31.212:3307 VM3 192.168.31.150: 330 ...
QQ JS省市区三级联动
如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...
loadrunner常用函数
1.关联函数:web_reg_save_param("session", "LB=value=", "RB=>", LAST);
如何在CALayer设置滤镜
网上有很多关于CALayer中设置filtes属性的相关资料比如如何设置一个带滤镜的layer,代码如下: NSImage* image = [NSImage imageNamed:@"IM ...
Climbing Stairs
Climbing Stairs https://leetcode.com/problems/climbing-stairs/ You are climbing a stair case. It tak ...
[嵌入式开发板]iTOP-4412开发板linux 系统存储空间的修改
平台:iTOP-4412开发板这里我们以修改成 1G 存储空间为例来讲解修改方法, 如果需要改成其他大小的存储空间,参照此方法修改即可. 首先连接好 iTOP-4412 开发板的调试串口到 pc ...
Varchar2 size how to decide?
When you execute a complicate store procedure, maybe it will execute a long time, maybe you want to ...
【对比分析八】null和undefined的区别
(1). null是一个表示"无"的对象,转为数值时为0 undefined是一个表示"无"的原始值,转为数值时为NaN (2). 当声明的变量还未被初始 ...

自编基于jQuery实现分页插件

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

随机推荐

热门专题