lay-ui +ajax实现分页

效果图:
在这里插入图片描述

1.创建html页面 01.html(前台文件)

2.创建index.php(后台文件)

------------------热身结束,开始正式分页之旅------------------

3.在html页面中引入layui需要用到的css以及js,还有我们自己额外需要用到的jquery

在这里插入图片描述
4.在html文件中,将基本的分页栏显示出来

在这里插入图片描述
5.好啦,html部分代码写完了,现在要写html文件中的script部分代码了

在这里插入图片描述
6.现在,浏览器的显示效果是这样的
在这里插入图片描述

7.基本的分页栏以及表头已经显示出来了,接下来就要结合ajax将数据显示出来了

8.我们的思路是这样的:

–将页码(我们定义为p)和用户选择的每页显示多少条数据(我们定义为limit)传到php后台

–php后台根据接收到的p和limit到数据库查询相应数据,并返回给前台,展示出来

–代码是这样的
在这里插入图片描述

9.php后台处理的代码

在这里插入图片描述
10.这样,我们就完成了ajax结合lay-ui实现分页的功能

注:要引入jquery文件,这样我们才能使用$.get(),要引入lay-ui的css和js文件,这样我们才能使用layui的组件laypage

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值