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卸载全部事件的思路详解
Apr 03 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
使用jquery实现轮播图效果
Jan 02 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 header下载函数
2014/01/31 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
js 异步处理进度条
2010/04/01 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
angular.element方法汇总
2015/01/07 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
python如何操作mysql
2020/08/17 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
英国绿色商店:Natural Collection
2019/05/03 全球购物
新员工培训个人的自我评价
2013/10/09 职场文书
班干部演讲稿
2014/04/24 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技