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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jQuery实时统计输入框字数及限制
Jun 24 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验证码实现代码
2014/05/10 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
php cookie 详解使用实例
2016/11/03 PHP
Js 刷新框架页的代码
2010/04/13 Javascript
js变换显示图片的实例
2013/04/16 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
c语言常见笔试题总结
2016/09/05 面试题
幼儿园家长寄语
2014/04/02 职场文书
家长会演讲稿
2014/04/26 职场文书
保护环境建议书400字
2014/05/13 职场文书
植树节口号
2014/06/21 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
民主评议党员工作总结
2014/10/20 职场文书
创业计划书之面包店
2019/09/17 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
python实现简单的聊天小程序
2021/07/07 Python