利用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

注:有不理解的地方,最好先看一下layui的官方文档

--分享是一种快乐,共同营造轻松愉快的开发氛围

--这篇文章适合新手学习,并欢迎各位新手和老油条老教授提出更优方案.