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,一经查实,立即删除!

相关文章

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;在…

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

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

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

核心提示&#xff1a;鲁大师如何测试新电脑呢&#xff1f;快来看看吧。1、首先需要先打开鲁大师这款软件&#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) {…

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…

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语…

有BUG!!!慎用default文本

前言下面这段代码&#xff0c;你能发现什么问题吗&#xff1f;public static int? Test1(string str) {return str switch{"A" > 1,"B" > 2,"C" > 3,_ > default,}; } public static int? Test2(string str) {switch (str){case &…

老师看完都吐血的五道题

全世界只有3.14 % 的人关注了 爆炸吧知识 老师看完都要吐血的五道题哈哈哈哈哈虽然小编觉得最后一答完全没问题哈哈哈图片来源于网络&#xff0c;如有侵权请联系删除。你点的每个在看&#xff0c;我都认真当成了喜欢

JDK5.0新特性--可变参数

2019独角兽企业重金招聘Python工程师标准>>> /*** 可变参数*/ public class VariableParamater {/*** 统计2个或多个数的和*/public static void main(String[] args) {//计算2个数的和sum(10,15);/** 问题&#xff1a;如果要计算3个数、4个数、5个数或n个数的和&am…

欧几里得距离网络_使用Tensorflow对象检测模型和OpenCV的社交距离和遮罩检测器...

将深度学习和计算机视觉相结合的隔离项目社会距离化这个术语已席卷全球&#xff0c;正在改变着我们的生活方式。社交距离也称为“物理距离”&#xff0c;是指在您自己与其他并非来自家庭的人之间保持安全的空间。随着该国开始在激增的COVID-19案件中发挥作用&#xff0c;保持社…

python 实现点击右键用某个程序打开功能_工欲善其事,必先利其器(1)——Python开发环境安装与配置...

Life Is Short, You Need Python.近年来随着Python的火爆&#xff0c;很多人想要学习并使用Python&#xff0c;本文将详细介绍一套Python开发环境的安装与配置&#xff0c;相比Python自带的IDEL&#xff0c;在此环境下将极大的提高开发效率。下面就让我们一步步的开始安装&…

5分钟盗走你的隐私照片,这个全球性漏洞到底有多可怕

全世界只有3.14 % 的人关注了爆炸吧知识转自&#xff1a;好机友ID&#xff1a;goodjiyou这个时代&#xff0c;大家对电脑出现漏洞&#xff0c;可能已经习以为常。但如果机哥告诉大家&#xff0c;这个漏洞能够在 5 分钟内&#xff0c;破解并盗取你所有加密文件&#xff0c;而且还…

我的世界命令计算机,我的世界有哪些指令?电脑版指令大全

在我的世界游戏中玩家可以依靠指令做很多现实生活中都可以做的事情&#xff0c;甚至有些现实中做不到的事情&#xff0c;比如上天堂&#xff0c;所以指令对于每个我的世界的玩家来说都非常重要&#xff0c;今天小编给大家介绍我的世界指令大全&#xff1a;我的世界指令大全&…

道德经和译文_老子《道德经》第九章原文、注释、译文、导读及解析(收藏版)...

《道德经》被誉为“万经之王”&#xff0c;内容涵盖哲学、伦理学、政治学、军事学等诸多学科&#xff0c;曾被后人尊奉为治国、齐家、修身、为学的宝典。它对我国的哲学、科学、政治、宗教等都产生了深远的影响&#xff0c;体现了古人的一种世界观和人生观。《道德经》作为道教…

StackOverflow程序员推荐:每个程序员都应读的30本书

“如果能时光倒流&#xff0c;回到过去&#xff0c;作为一个开发人员&#xff0c;你可以告诉自己在职业生涯初期应该读一本&#xff0c;你会选择哪本书呢&#xff1f;我希望这个书单列表内容丰富&#xff0c;可以涵盖很多东西。” 很多程序员响应&#xff0c;他们在推荐时也写下…