JS对数据分页的封装方法

 

该文章属于原创:更多详细说明查看:http://www.pm-road.com/index.php/2014/07/24/26/

因为web端经常会展示很多数据,如果一页下来,肯定会看的眼花缭乱,所以肯定会用到分页的方法;网上会有很多分页的方法,但像这种情况, 我都会自己去写这样方法,而不是照网上的搬过来;以下就是自己封装的一个方法,非常容易懂,也用做自己以后开发中的一个方法,代码如下(前提需要引入 JQuery.js):


/**
* 其中会传入三个参数,另外在代码中有一个方法beginPostTestResult(page),

* 该方法是需要自己写的方法,该方法的作用就是向后台发出请求,得回数据的方法;
* @param page 当前页
* @param maxPage 最大页
* @param divId 你要把这个页分的显示放在哪个div中,传入divId
*/
function initPageInfo(page,maxPage,divId){
$("#"+divId).html("");
var kongge = "    ";
var firstPage = "首页";
var prePage = "上一页";
var endPage = "末页";
var nextPage = "下一页";

if(page < 1){
page = 1;
}
if(page > maxPage ){
page = maxPage ;
}
if(page == 1 && page < maxPage){
endPage = “<a href=’javascript:;’ οnclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
nextPage =  “<a href=’javascript:;’ οnclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
}else if(page >1 && page < maxPage){
firstPage = “<a href=’javascript:;’ οnclick=’beginPostTestResult(1)’>首页</a>”;
prePage = “<a href=’javascript:;’ οnclick=’beginPostTestResult(“+(page-1)+”)’>上一页</a>”;
endPage = “<a href=’javascript:;’ οnclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
nextPage =  “<a href=’javascript:;’ οnclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
}else if(page > 1 && page == maxPage){
firstPage = “<a href=’javascript:;’ οnclick=’beginPostTestResult(1)’>首页</a>”;
prePage = “<a href=’javascript:;’ οnclick=’beginPostTestResult(“+(page-1)+”)’>上一页</a>”;
}
$(“#”+divId).html(firstPage+kongge+prePage+kongge+page+kongge+nextPage+kongge+endPage);
}

一般情况下,我都会这样去用此方法:

function beginPostTestResult(page){

$.post(url,{参数},function(data,state,response){

//TODO你的操作

//注意:参数page 都要是整形的,不能是字符型

initPageInfo(page,maxPage,divId);

},”json”);

}

因为web端经常会展示很多数据,如果一页下来,肯定会看的眼花缭乱,所以肯定会用到分页的方法;网上会有很多分页的方法,但像这种情况, 我都会自己去写这样方法,而不是照网上的搬过来;以下就是自己封装的一个方法,非常容易懂,也用做自己以后开发中的一个方法,代码如下(前提需要引入 JQuery.js):


/**
* 其中会传入三个参数,另外在代码中有一个方法beginPostTestResult(page),

* 该方法是需要自己写的方法,该方法的作用就是向后台发出请求,得回数据的方法;
* @param page 当前页
* @param maxPage 最大页
* @param divId 你要把这个页分的显示放在哪个div中,传入divId
*/
function initPageInfo(page,maxPage,divId){
$("#"+divId).html("");
var kongge = "&nbsp;&nbsp;&nbsp;&nbsp;";
var firstPage = "首页";
var prePage = "上一页";
var endPage = "末页";
var nextPage = "下一页";

if(page < 1){
page = 1;
}
if(page > maxPage ){
page = maxPage ;
}
if(page == 1 && page < maxPage){
endPage = “<a href=’javascript:;’ οnclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
nextPage =  “<a href=’javascript:;’ οnclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
}else if(page >1 && page < maxPage){
firstPage = “<a href=’javascript:;’ οnclick=’beginPostTestResult(1)’>首页</a>”;
prePage = “<a href=’javascript:;’ οnclick=’beginPostTestResult(“+(page-1)+”)’>上一页</a>”;
endPage = “<a href=’javascript:;’ οnclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
nextPage =  “<a href=’javascript:;’ οnclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
}else if(page > 1 && page == maxPage){
firstPage = “<a href=’javascript:;’ οnclick=’beginPostTestResult(1)’>首页</a>”;
prePage = “<a href=’javascript:;’ οnclick=’beginPostTestResult(“+(page-1)+”)’>上一页</a>”;
}
$(“#”+divId).html(firstPage+kongge+prePage+kongge+page+kongge+nextPage+kongge+endPage);
}

一般情况下,我都会这样去用此方法:

function beginPostTestResult(page){

$.post(url,{参数},function(data,state,response){

//TODO你的操作

//注意:参数page 都要是整形的,不能是字符型

initPageInfo(page,maxPage,divId);

},”json”);

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值