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实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jquery实现简单每周轮换的日历
Sep 10 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 file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
ie下动态加态js文件的方法
2011/09/13 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
JS hashMap实例详解
2016/05/26 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
python生成带有表格的图片实例
2019/02/03 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
python实现画出e指数函数的图像
2019/11/21 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
自荐信格式技巧有哪些呢
2013/11/19 职场文书
计算机网络专业推荐信
2013/11/24 职场文书
火锅店营销方案
2014/02/26 职场文书
跑操口号
2014/06/12 职场文书
2015年班干部工作总结
2015/04/29 职场文书
田径运动会通讯稿
2015/07/18 职场文书
结婚纪念日感言
2015/08/01 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis