自编基于jQuery实现分页插件

时间:2022-02-03 00:43:03
$(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']
});
}
}
});

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

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