js分页小组件,关于回调



前端随便弄了个静态页面,用文本写了个分页,所以自己修改接口和js,临时做了个分页小插件 因为页面是用tab页组成,页面好几个tab公用一个分页组件,但是分页的按钮点击事件只有一个, 每个tab发送一个ajax请求,获取数据后(数据展示省略),调用方法 /** data:ajax返回的数据,loadCjwt:点击分页按钮触发的方法,page_cjwt:展示分页的位置 */ getPageBar(data,"loadCjwt","page_cjwt"); //生成分页的代码 function getPageBar(data,func,target){ var count=data.page.count;//数据总数 var pages=data.page.pages;//总页数 var currpage=data.page.currPage;//当前页(第一页是0开始,显示的页数要+1) var pageBar='<p class="fenye">每页<span>10</span>条记录    总共<span id="count_tzgg">'+count+'</span>条记录   '; pageBar+='<a href="javascript:void(0);" onclick="firstPage('+func+');">首页</a>    '; pageBar+='<a href="javascript:void(0);" onclick="prePage('+func+','+currpage+');">上一页</a>    '; pageBar+='<a href="javascript:void(0);" onclick="nextPage('+func+','+currpage+','+pages+');">下一页</a>    '; pageBar+='<a href="javascript:void(0);" onclick="lastPage('+func+','+pages+');">尾页<a/>    '; pageBar+='页码:<input id="yeshu_number" value="'+(currpage+1)+'" type="text" style="width: 30px; text-align: center; height: 18px;" oninput="check()">/<span id="pages_tzgg">'+pages+'</span>    '; pageBar+='<a href="javascript:void(0);" onclick="gotoPage('+func+','+pages+');">跳转</a></p>'; $("#"+target).html(pageBar); } //点击分页插件按钮的事件 //首页 function firstPage(func){ func(0); //loadTzgg(0);修改之前是点击,执行loadTzgg()这个方法,修改之后,执行func,而func是作为参数传进来的 } //尾页 function lastPage(func,pages){ func(pages-1); //loadTzgg(pages-1); } //下一页 function nextPage(func,currpage,pages){ if(currpage<pages-1){ func(currpage+1); //loadTzgg(currpage+1); }else{ alert("已经是最后一页"); } } //上一页 function prePage(func,currpage){ if(currpage>0){ func(currpage-1); //loadTzgg(currpage-1); }else{ alert("已经是第一页"); } } //跳转页面 function gotoPage(func,pages){ var beginIndex=$("#yeshu_number").val(); if(beginIndex==''){ alert("请输入跳转的页码"); }else if(beginIndex>pages){ alert("输入的页数不能超过总页数"); }else if(beginIndex<1){ alert("输入的页数不能小于1"); }else{ func(beginIndex-1); //loadTzgg(beginIndex-1); } } 
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值