jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
需求分析
1)需要首页,末页功能
2)有点击查看上一页,下一页功能
3)页码到当前可视页码最后一页刷新页面
实现思路
也是分为三部分处理
1)点击首页,末页直接显示第一页或者最后一页内容,当前页面为第1页或者最后一页。隐藏首页或者末页按钮。demo 显示截图
首页状态 和 末页状态代码执行结果截图
2)点击可视页码截图
3)点击上一页或者下一页,,需要刷新页码状态时截图,昨天表示当前页码为7,右图是点击上一页,刷新页码时的状态
代码参数说明
<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 的时候,显示状态如下图所示
代码优缺点
1)使用ajax可以实现局部刷新,但是不利于seo
2) 生成页码没有改变dom结构,只变化页码
最近项目中的需求,自己写的一个。有时间的话会用js实现一遍。
有需要的话,完整demo ,点此下载
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
- 用jQuery中的ajax分页实现代码
- JQuery+Ajax无刷新分页的实例代码
- jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
- jQuery DataTables插件自定义Ajax分页实例解析
- JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现
- 使用PHP+JQuery+Ajax分页的实现
- MVC+jQuery.Ajax异步实现增删改查和分页
- 使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页
- jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
- jquery+Ajax实现简单分页条效果
相关文章
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件HighCharts绘制简单2D柱状图效果,结合完整实例形式分析了jQuery使用HighCharts插件绘制2D柱状图的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03自己动手实现jQuery Callbacks完整功能代码详解
最近大量的用到jQuery Callbacks 对象,jQuery库中的$.ajax()和$.Deferred() 对象也是基于这个对象实现,下面我们也模拟实现jQuery Callbacks 对象的部分功能2013-11-11jquery分页插件jquery.pagination.js使用方法解析
这篇文章主要针对js分页插件jquery.pagination.js使用方法进行解析,很实用的分页插件,感兴趣的小伙伴们可以参考一下2016-04-04
最新评论