# 1、分页原理
//查询所有数据
select * from sheng;
//假设每页显示3条数据,用变量$pageSize表示,即$pageSize=3;
//第一页:select * from sheng limit 0,3;
//第二页:select * from sheng limit 3,3;
//第三页:select * from sheng limit 6,3;
//当前的页码从地址栏获取,如果地址栏存在p参数,就获取它,如果不存在p参数,默认是第1页
//第$p页:select * from sheng limit ($p-1)*$pageSize, $pageSize;
# 2、实现分页数据查询
![](https://img.kancloud.cn/7a/a0/7aa0e984f3f2d6d8dcc9f070706e9699_938x394.png)
浏览器直接访问这个page.php页面,如果能够看到第1页的数据,可以手动在地址栏添加p参数,看一下是否能够获取到下一页的数据:
![](https://img.kancloud.cn/41/49/4149fb06290bb1ad7357ab86b02d7dde_664x368.png)
# 3、输出数据并实现页码功能
输出数据:
![](https://img.kancloud.cn/b7/01/b701071301016cd196f966ce978d4094_1025x588.png)
制作页码:
![](https://img.kancloud.cn/67/7d/677d7f9ed0b44671f71537ce888af50c_843x629.png)
把得到的$page放到页面中即可:
![](https://img.kancloud.cn/84/2f/842f1f05b1266682d19f7707ddd1c6b6_666x421.png)
# 4、无刷新分页,获取第一页数据
首先将原page.php中的HTML部分剪切出来,放到page.html的文件中。
page.html中,写JS,当页面加载完毕,发送ajax请求到page.php。请求第一页的数据和分页页码:
![](https://img.kancloud.cn/2a/bd/2abdba0450f5b7fc4255c41ffad0f3e5_1073x412.png)
page.php中将数据data和分页page合并到一起,然后转换成json返回:
![](https://img.kancloud.cn/2f/27/2f2745c7148ab30007e8b6e8ed66260c_797x449.png)
page.html中,处理服务器返回的数据:
![](https://img.kancloud.cn/86/16/86164402efa2e9eaf05b5065ed1a8b0c_859x582.png)
这样,访问page.html,就可以看到第一页的数据了。
# 5、实现无刷新的分页
要实现无刷新的分页,必须让a标签不能跳转才可以。所以将a标签的href属性值都写成javascript:void(0);
又因为,点击a标签的时候,必须知道你要请求哪一页的数据,所以在a标签上还必须体现出请求的页码。
所以修改php代码:
![](https://img.kancloud.cn/14/23/1423e0dfd95e18557d6447a1c2f0360e_908x591.png)
检测一下,刷新page.html,通过浏览器工具,就可以看到a标签的样子如下:
![](https://img.kancloud.cn/1b/e2/1be21b1b315e6dde57d84c99b7e55182_707x396.png)
下一步,点击页面中的a标签,发送ajax请求就可以了:
![](https://img.kancloud.cn/65/77/65776f505e0275cf9fff4e6d36aa5d25_853x318.png)
请求完数据,处理方式和第一页相同,可以复制处理数据的代码,也可以封装成一个函数:
- 第一天
- 一、学习目标
- 二、关于JavaScript
- 三、JS语法基础
- 四、变量
- 五、常量
- 六、运算符
- 七、数组
- 八、对象
- 九、数据类型
- 第二天
- 一、昨日复习
- 二、今日目标
- 三、数据类型转换
- 四、流程控制
- 五、函数基础
- 六、作用域
- 七、标准库(内置对象)
- 八、总结
- 第三天
- 一、昨日复习
- 二、今日目标
- 三、DOM介绍
- 四、元素(标签)节点查询操作
- 五、元素(标签)节点增删改操作
- 六、设置/获取元素的css样式
- 七、事件和事件对象
- 八、键盘keyCode对照表
- 第四天
- 一、昨日复习
- 二、今日目标
- 三、DOM之属性节点操作
- 四、DOM对象的通用属性
- 五、DOM获取元素的位置
- 六、事件绑定与移除
- 七、事件对象相关属性和方法使用
- 八、案例--可编辑的表格
- 第五天
- 一、今日目标
- 二、执行流程
- 三、定时器
- 四、闭包
- 五、案例
- 第六天
- 一、昨日回顾
- 二、今日目标
- 三、正则表达式概述
- 四、入门案例
- 五、正则语法
- 六、分组/捕获和反向引用
- 七、匹配中文(utf-8编码)
- 八、环视(断言/零宽断言/正向预测/负向预测)
- 九、正则对象的属性和方法
- 十、支持正则表达式的 String 对象的方法
- 十一、案例
- 十二、PHP中的正则表达式
- 第七天
- 一、昨日回顾
- 二、正则案例
- 三、PHP中的正则表达式
- 四、正则练习
- 五、仿淘宝评分小星星
- 六、标签页效果
- 七、横向下拉菜单
- 第八天
- 一、今日目标
- 二、面向对象编程
- 三、定义对象
- 四、对象相关操作
- 五、对象在内存中的存在形式
- 六、原型对象(关键)
- 七、定义对象进阶
- 八、函数进阶
- 第九天
- 一、昨日回顾
- 二、今日目标
- 三、Object
- 四、继承
- 五、this指向总结
- 六、案例(贪吃蛇)
- 第十天
- 一、今日目标
- 二、Ajax概述
- 三、工作原理
- 四、XMLHttpRequest对象介绍
- 五、使用Ajax的步骤
- 六、细节问题
- 七、JSON
- 八、Ajax中,服务器返回json格式的数据
- 九、案例--省市县三级联动
- 第十一天
- 一、昨日回顾
- 二、今日目标
- 三、完成省市县三级联动
- 四、优化省市县三级联动
- 五、服务器返回XML格式的数据
- 六、FormData对象
- 七、跨域请求
- 八、实现跨域请求
- 第十二天
- 一、Ajax回顾
- 二、今日目标
- 三、jQuery概述
- 四、快速入门
- 五、可编辑的表格
- 六、纵向导航菜单
- 七、横向导航菜单
- 八、标签页效果
- 第十三天
- 一、学习目标
- 二、杂项
- 三、jQuery中的事件
- 四、jQuery封装的Ajax
- 五、案例 -- 无刷新的分页
- 第十四天
- 一、昨日回顾
- 二、效果
- 三、跨域请求
- 四、文档操作
- 五、插件编写
- 六、自定义插件
- 七、第三方插件