jQuery实现分页功能(含ajax请求、后台数据、附完整demo)


Posted in jQuery onApril 03, 2017

需求分析

1)需要首页,末页功能

2)有点击查看上一页,下一页功能

3)页码到当前可视页码最后一页刷新页面

实现思路

也是分为三部分处理

1)点击首页,末页直接显示第一页或者最后一页内容,当前页面为第1页或者最后一页。隐藏首页或者末页按钮。demo 显示截图

首页状态 和 末页状态代码执行结果截图

jQuery实现分页功能(含ajax请求、后台数据、附完整demo)jQuery实现分页功能(含ajax请求、后台数据、附完整demo)

2)点击可视页码截图

jQuery实现分页功能(含ajax请求、后台数据、附完整demo)

3)点击上一页或者下一页,,需要刷新页码状态时截图,昨天表示当前页码为7,右图是点击上一页,刷新页码时的状态

jQuery实现分页功能(含ajax请求、后台数据、附完整demo)jQuery实现分页功能(含ajax请求、后台数据、附完整demo)

代码参数说明

<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="data/data.js" type="text/javascript"></script>
<script src="js/sendAjax.js" type="text/javascript"></script>
<script src="js/page.js" type="text/javascript"></script>
<script>
 /* 初始化页面 */
 var initTotalPageNum = 11;
 $("#ui-page").paging({pageSize:5,totalPage:initTotalPageNum});
 </script>

为了区分清楚,所以把每一个文件都分开写了。

data.js

//是用json模拟的后台数据.

sendAjax.js

//是模拟的ajax请求后台数据的文件

page.js

//是封装的生成页码的功能

initTotalPageNum

//模拟的后台传入的数据总页码

pageSize

//自定义参数,可以定义可视区域代码,当前demo。pageSize = 5,initTotalPageNum=3 小于pageSize 的时候,显示状态如下图所示

jQuery实现分页功能(含ajax请求、后台数据、附完整demo)

代码优缺点

1)使用ajax可以实现局部刷新,但是不利于seo

2) 生成页码没有改变dom结构,只变化页码

最近项目中的需求,自己写的一个。有时间的话会用js实现一遍。

有需要的话,完整demo ,点此下载 

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
基于jQuery实现瀑布流页面
Apr 11 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 #jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 #jQuery
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 #jQuery
jQuery UI Grid 模态框中的表格实例代码
Apr 01 #jQuery
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 #jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 #jQuery
基于jquery实现二级联动效果
Mar 30 #jQuery
You might like
用PHP实现WEB动态网页静态
2006/10/09 PHP
php array的学习笔记
2012/05/10 PHP
PHP实现的json类实例
2015/07/28 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
网页javascript精华代码集
2007/01/24 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
新郎新娘婚礼答谢词
2014/01/11 职场文书
工作失职检讨书范文
2014/01/16 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
广告学毕业生求职信
2014/01/30 职场文书
小学生环保演讲稿
2014/04/25 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
见习报告的格式
2014/10/31 职场文书
端午节活动总结报告
2015/02/11 职场文书
企业宣传稿范文
2015/07/23 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS