文档章节

JS对数据分页的封装方法

p
 pm-road
发布于 2014/12/17 14:55
字数 871
阅读 112
收藏 1

 

该文章属于原创:更多详细说明查看: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:;’ onclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
nextPage =  “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
}else if(page >1 && page < maxPage){
firstPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(1)’>首页</a>”;
prePage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page-1)+”)’>上一页</a>”;
endPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
nextPage =  “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
}else if(page > 1 && page == maxPage){
firstPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(1)’>首页</a>”;
prePage = “<a href=’javascript:;’ onclick=’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:;’ onclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
nextPage =  “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
}else if(page >1 && page < maxPage){
firstPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(1)’>首页</a>”;
prePage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page-1)+”)’>上一页</a>”;
endPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
nextPage =  “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
}else if(page > 1 && page == maxPage){
firstPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(1)’>首页</a>”;
prePage = “<a href=’javascript:;’ onclick=’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”);

}

本文转载自:http://rqlipeng.iteye.com/blog/2156892

p
粉丝 6
博文 69
码字总数 638
作品 0
海淀
私信 提问
手把手教你用原生JavaScript造轮子(1)——分页器

日常工作中经常会发现有大量业务逻辑是重复的,而用别人的插件也不能完美解决一些定制化的需求,所以我决定把一些常用的组件抽离、封装出来,形成一套自己的插件库。同时,我将用这个教程系列...

csdoker
2018/07/26
0
0
bboss分页组件翻页js前置处理函数和js后置处理函数使用方法

bboss 3.7.7版本及后续版本为分页组件增加翻页js前置处理函数和翻页js后置处理函数,本文介绍使用方法。 1.说明: 为了实现这个功能,对/include下面的pager.js文件做了重构,将所有的分页处...

bboss
2014/01/16
0
0
MVC如何使用开源分页插件shenniu.pager.js

  最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了;虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(...

神牛步行3
2016/12/06
0
0
Extjs gridPanl中本地数据分页

在EXtjs的gridPanl中store数据,分页的时候,一般是请求远程后台的数据,但是现在有需求,要对前台的本地数据进行分页 解决的办法(两种): 方法一:这里我们要用到一个插件: Ext.ux.data....

EDIAGD
2013/09/14
4.9K
0
JeeSite | 数据分页与翻页

本文章介绍的是JeeSite开源项目二次开发时的一些笔记,对于没有使用过JeeSite的可以不用往下看了,因为下面的代码是跟JeeSite二次开发相关的代码,不做JeeSite的二次开发,以下代码对您无用,...

码农UP2U
10/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

kail 树莓派中文字体设置

1修改源信息 vi /etc/apt/sources.list 将原有源信息注释,替换为以下任意源信息 #中科大deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contribdeb-src http://mirr...

飞翔的白云
1分钟前
1
0
关于[Warning] IPv4 forwarding is disabled. Networking will not work的报错处理

在Linux虚拟机中操作Docker ,构建Docker镜像时出现报错 \[Warning\] IPv4 forwarding is disabled. Networking will not work 处理办法: 修改/etc/sysctl.conf文件,添加 net.ipv4.ip_fo...

芥末无敌
3分钟前
1
0
Redis

red

天空飘来五个字儿
3分钟前
2
0
Python学习笔记--传值和传地址

写了下面四个函数: def ChangeInt(num): #改变整数为-1 num = -1a = 1ChangeInt(a)print(a)#-------------------------------------def ChangeList1(ls, index): #改变...

myctrd
4分钟前
1
0
人脸识别技术开发功能,人脸识别二次开发

人脸识别系统是针对机关单位的实际情况,基于人脸识别技术开发的机关、企业职员考勤、门禁、食堂餐饮、停车等信息管理系统。实现“一张笑脸,通行单位”的功能。人脸识别系统使用先进的人脸识...

非思丸智能FaceTo
5分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部