$(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']);//模板种类1if(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']});}}
});

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

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

转载于:https://www.cnblogs.com/JimLy-BUG/p/5026797.html

自编基于jQuery实现分页插件相关推荐

  1. 基于jquery的分页插件

    一.效果图. 二.html示例. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">&l ...

  2. java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程

    摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...

  3. H5C3动画实例,通过基于jQuery的fullpage插件完成

    要点: 1.素材是黑马程序员的,自己重写了下代码,主要是为了体会下h5c3. 2.环境 : 3.主要是加入了pullpage的插件特有的功能帮助开发,其中基于jQuery开发的插件,其定义的方法一般都 ...

  4. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

  5. Jquery的分页插件

    Jquery的分页插件, 用起来还不错. 来自: http://flaviusmatis.github.io/simplePagination.js/ 下载地址: https://github.com ...

  6. Jquery自定义分页插件

    效果: 核心代码: 自定义Jquery插件grid.js //Jquery自定义分页插件 (function($) {$.fn.grid= function(options) {var objGrid ...

  7. jquery.pagination 分页插件使用代码

    jquery.pagination 分页插件 下载链接 http://www.jq22.com/yanshi5697 js代码内容 var listLength = '' var pageNum = ...

  8. 12款优秀jQuery Ajax分页插件和教程

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...

  9. 分页插件 ajax请求,jquery ajax分页插件的简单实现

    说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 ...

  10. jQuery Pagination分页插件--无刷新

    源码:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeAjax.aspx 代 ...

最新文章

  1. 如何在ASP.Net 中把图片存入数据库
  2. healpy的安装(包括healpix)
  3. mysql 5.6 cmake 安装_Cmake MySQL5.6 编译安装
  4. 深度剖析冒泡排序机制
  5. java中集合的结构list类型
  6. 谷歌技术专家关于JavaScript的一个引人注目的观点
  7. 通过channel进行goroutine间的通信
  8. Spark cluster 安装
  9. Git用命令提交代码并合并
  10. python新浪api_python调用新浪微博API项目实践
  11. ubuntu 终端查看图片(eog)
  12. python-Selenium
  13. imagenet数据集类别标签和对应的英文中文对照表
  14. C# 开启HTTP监听服务与线程数量控制
  15. 河南测绘职业学计算机杨,河南测绘职业学院23名校友参加2020年珠峰高程测量
  16. 室内监控摄像机能做什么?安装在室内有哪些好处?
  17. MySQL事务分析和锁机制分析
  18. OpenGL 2D贴图texture与着色器Shader
  19. [nRF51822] 15、穿戴式设备上电量检测装置的设计及细节技术点(偏专业硬件文章)...
  20. 【读点论文】AN IMAGE IS WORTH 16X16 WORDS: TRANSFORMERS FOR IMAGE RECOGNITION AT SCALE(ViT)像处理自然语言那样处理图片

热门文章

  1. 10倍提升应用性能的10个建议 (理论篇)
  2. 加密方式(包括MD5 base64 对称加密 非对称加密简介)
  3. 记一次逆向拿到github token 然后dump掉别人所有库的
  4. extern C的思考
  5. 面试带你飞:这是一份全面的 计算机网络基础 总结攻略
  6. conda create出现连接问题_使用conda安装命令时一直出现问题,因为从2019年4月添加的国内镜像都不能用了...
  7. hadoop 权限错误 Permission denied: user=root, access=WRITE, inode=“/“:hdfs:super
  8. python flag格式_Python 字符串格式化之 printf-style
  9. php基础案例 购物车,php购物车实例(1/5)_PHP教程
  10. Git:git合并分支