JS对数据分页的封装方法

为什么80%的码农都做不了架构师?>>>   hot3.png

 

该文章属于原创:更多详细说明查看: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”);

}

转载于:https://my.oschina.net/pmroad/blog/357123

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/298521.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机语言平均数怎么算,使用python怎么求三个数的平均值

使用python怎么求三个数的平均值发布时间&#xff1a;2021-04-27 17:31:39来源&#xff1a;亿速云阅读&#xff1a;64作者&#xff1a;Leah本篇文章给大家分享的是有关使用python怎么求三个数的平均值&#xff0c;小编觉得挺实用的&#xff0c;因此分享给大家学习&#xff0c;希…

xftp6设置默认打开文件的程序_修改文件默认打开方式,不改变原图标

由于经常需要看pdf文件&#xff0c;一直以来都是用的Microsoft Edge阅读pdf文件&#xff0c;但是Microsoft Edge打开pdf文件字体的清晰度不高&#xff0c;而且使用ctrlf进行查找时&#xff0c;高亮部分不够明显&#xff0c;所以决定用Chrome来打开pdf文件&#xff0c;于是就将p…

名片管理系统python详解_名的解释|名的意思|汉典“名”字的基本解释

【丑集上】【口】 名康熙筆画&#xff1a;6 部外筆画&#xff1a;3【唐韻】武幷切【集韻】【韻會】彌幷切【正韻】眉兵切&#xff0c; &#x20024;音詺。【說文】自命也。从口从夕。夕者&#xff0c;冥也。冥不相見&#xff0c;故以口自名。【玉篇】號也。【廣韻】名字也。【…

简单三分钟,本地搭建k8s

使用 minikube 在本地搭建 k8s 已经比以前要简单很多了。本文&#xff0c;我们通过简短的三分钟来重现一下在本地搭建 k8s 实验环境的步骤。下载 Minikube 首先&#xff0c;你可能会考虑从官网下载 minikube 然后进行安装&#xff0c;但是这样实际上可以预知的是&#xff0c;在…

CLS/CLR、c#(等语言)、托管、元数据、程序集 CLR学习第二课

一、名称解释&#xff1a; CLS:common language specilication&#xff1a;通用语言规范&#xff1b; CLR:common language Runtime 公共语言运行时。 托管代码&#xff1a;编译的代码直接clr等一层一层的进行 代码编译&#xff08;C#--C#编译器--CLR&#xff08;把它编译为IL&…

作为史上最疯狂的科学家,特斯拉提出过哪些惊世骇俗的设想

全世界只有3.14 % 的人关注了爆炸吧知识尼古拉特斯拉是有史以来最疯狂的科学家之一&#xff0c;不管你认为他是天才还是疯子&#xff0c;都无法否认他的才华和想象力。特斯拉在他的时代提出了许多天才的发明和想法&#xff0c;其中一些直到今天都被认为是不切实际或极其危险的。…

新电脑怎么测试软件,鲁大师如何测试新电脑 鲁大师测新机方法

核心提示&#xff1a;鲁大师如何测试新电脑呢&#xff1f;快来看看吧。1、首先需要先打开鲁大师这款软件&#xff0c;进入到主界面&#xff0c;在看新机之前有需要注意的几点&#xff0c;如果电脑的拥有者之前本来就是通过二手的渠道购买的电脑&#xff0c;那电脑本身就是二手的…

java 类的加载、连接和初始化

JVM和类 调用Java命令运行Java程序时&#xff0c;该命令将会启动一条Java虚拟机进程&#xff0c;不管该Java程序启动了多少条线程&#xff0c;创建了多少个变量&#xff0c;它们都处于该Java虚拟机进程里&#xff0c;共享该JVM进程的内存区。当系统出现以下几种情况时&#xff…

讯雷使用小技巧

迅雷是大家平时用得最多的下载软件&#xff0c;但是很多人可能平时只是简单地使用。不过&#xff0c;有时经验是十分有用的。养成使用迅雷的良好习惯&#xff0c;相当有用。本文主要介绍使用迅雷的一些经验&#xff0c;在此跟大家分享。一、尽量不将迅雷安装于系统盘 大家在安装…

机器人等级考试一级教具_全国青少年机器人技术等级考试(一级):基本结构...

​机器人技术&#xff0c;是衡量一个国家科技创新和高端制造业水平的重要标志。大力推动机器人技术创新与行业发展&#xff0c;关键在于人才的培养。少年强&#xff0c;则国强。机器人作为信息化教育的新载体&#xff0c;不仅要让更多中国青少年了解机器人的发展&#xff0c;掌…

react dispatch_React测试的那些事(三) React Hook 测试实例

useReducer测试 useReducer 首先需要在组件中用 actions 和 reducers &#xff0c;代码如下。Reducerimport * as ACTIONS from ./actionsexport const initialState {stateprop1: false, }export const Reducer1 (state initialState, action) > {switch(action.type) {…

java中的堆和栈

1.简单的说&#xff1a;Java把内存划分成两种&#xff1a;一种是栈内存&#xff0c;一种是堆内存。 在函数中定义的一些基本类型的变量和对象的引用变量都在函数的栈内存中分配。当在一段代码块定义一个变量时&#xff0c;Java就在栈中为这个变量分配内存空间&#xff0c;当超过…

Blazor 组件库开发指南

翻译自 Waqas Anwar 2021年5月21日的文章 《A Developer’s Guide To Blazor Component Libraries》 [1]Blazor 的核心是组件&#xff0c;我们创建不同类型的组件并在整个项目中重用它们。没有人想重复造轮子&#xff0c;因此创建一个可重用的 Blazor 组件库始终是一个好主意&a…

今年大学毕业照画风太清奇.....我忍不住笑出了声!

全世界只有3.14 % 的人关注了爆炸吧知识转眼又到毕业季&#xff0c;今年毕业季因疫情有些不一样。PS云毕业照、云答辩、云面试&#xff0c;不少毕业生调侃自己是“云毕业”。最近不少大学生在网上哀嚎&#xff0c;原因是学校要他们上交照片&#xff0c;以便制作毕业照&#xff…

exec和sp_executesql

sqlserver中的exec和sp_executesql都能执行动态的sql语句和存储过程&#xff0c;但exec用法较为简单&#xff0c;不能带参数&#xff0c;也没有返回参数。 sp_executesql则显得功能更加完善&#xff0c;可以用输入参数和输出参数&#xff0c;下面这个例子记录了sp_executesql的…

计算机高效课堂建设,打造职业学校计算机高效课堂.doc

精品文档(可编辑) 值得下载打造职业学校计算机高效课堂近年来&#xff0c;随着社会的不断发展和经济的快速增长&#xff0c;职业教育越来越受到重视&#xff0c;很多企业在招聘时看重的是学生的专业技能&#xff0c;因此&#xff0c;职业学校须高度重视学校的教学质量&#xff…

彻底解决.net中编码问题的心得

本文将解决.net(c#)系统中因编码转换而出现的乱码问题。最近的系统与字符集打交道&#xff0c;字符集的编码是一个非常头疼的事情&#xff0c;不小心就会造成乱码。深入学习编码知识&#xff0c;可以使我们在写程序时少走弯路。 要实现的功能&#xff1a;将一大堆网页文件批量导…

sql语句查询结果合并union 和union all用法

--合并重复行select * from Aunionselect * from B --不合并重复行select * from Aunion allselect * from B 按某个字段排序--合并重复行select *from (select * from Aunionselect * from B) AS Torder by 字段名 --不合并重复行select *from (select * from Aunion allselec…

vc 控制台添加托盘显示_开源:ESP8266读DHT11温湿度,小程序实时显示

第一、原理讲解原理简述&#xff1a;利用发布订阅模式。第一步&#xff0c;先读取DHT11温湿度数值&#xff0c;第二步&#xff0c;新建主题&#xff0c;然后esp8266往这个主题发送消息&#xff0c;第三步。小程序通过http API接口获取数据。小程序控制原理&#xff1a;esp8266订…

python if elif else_python:通讯录(字典+while+if/else)

Hello,World.我是很久很久很久都没有更新的土土[看]但是即便如此呢我这个人也不喜欢拖拖拉拉的东扯西扯一上来咱们就来讲讲正题勿怪[笑哭]1.使用字典构建通讯录mydic{}//定义一个字典2.使用whlie循环判断是否继续进行while True://循环开始break//循环结束3.使用if/elif/else语…