💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
# 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) 请求完数据,处理方式和第一页相同,可以复制处理数据的代码,也可以封装成一个函数: