自编基于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']+" 当前第<strong>"+currentPage+"</strong>页 "); //对于上一页按钮的控制 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'] }); } } });
我们都过分崇拜别人的代码,那是因为你在看不在写！！！
版权声明：本文为博主原创文章，未经博主允许不得转载。
