利用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的官方文档

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/282789.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

酷派手机android版本,系统版本迎来升级

系统版本迎来升级这个应该是两个版本之间最大但是却不那么直观的不同了,因为从TD版酷派大神F1采用的CoolLife UI 5.0版本,再到联通版酷派大神F1所搭载的CoolLife UI 5.5版本,它们之间经历了一个比较不错的升级。在图标ICON,功能设…

最终用户计算安全——特权访问控制

本篇算是系列的第二篇,之前写了一篇关于勒索软件攻击的,坦白说写这样的文很费脑子,而且喜欢看的读者估计也不多…不过我觉得整理一下思路,对于通过最终用户计算产品或方案来提升组织安全还是有很大的意义的。所以一边喝着清茶吃着…

详述 IntelliJ IDEA 插件的安装及使用方法

首先,进入插件安装界面: Mac:IntelliJ IDEA -> Preferences -> Plugins;Windows:File -> Settings -> Plugins.标注 1:显示 IntelliJ IDEA 的插件分类, All plugins:显示 IntelliJ …

杭漂两年,深漂两年,宇宙的尽头到底在哪儿

hi,这里是桑小榆。这次分享的是一位杭漂两年,深漂两年的码农伙伴的经历。首先他能够在大学期间就寻找到自己的热爱并持之以恒值得令人学习。其次他的工作经历可以说是非常的“程序员”,因为程序员所面对的职业生涯中,所谓的实习&a…

侣信即时通讯系统的技术解析

侣信: 说明: 侣信专业版是面向中小企业和者各类团队组织内部交流使用工具,可以在互联网或者局域网中使用。具有丰富的功能,聊天,群组,部门组织,内部朋友圈,以及漂流瓶摇一摇等功能。它可以在局域…

Confluence 6 使用 WebDAV 客户端来对页面进行操作

下面的部分告诉你如何在不同的系统中来设置原生的 WebDAV 客户端,这个客户端通常显示在你操作系统的文件浏览器中,例如,Windows 的 Windows Explorer 或者 Linux 的 Konqueror。在 Mac OSX Finder 中访问 Confluence你可以成功的连接&#xf…

.Net之接口小知识

目的通过一个简单的项目,在原来的文章基础上完善一下常用的几种WebApi编写方式以及请求方式,一方面是用于给我一个前端朋友用来学习调用接口,另一方面让我测试HttpClient的一些效果。本文示例代码环境:vs2022、net6准备新创建了一…

你所不知道的setTimeout

JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。初始接触它的人都觉得好简单,实时上真的如此么?这里记载下&#…

android 特效绘图,Android绘图机制与处理技巧——Android图像处理之图形特效处理...

Android变形矩阵——Matrix对于图像的图形变换,Android系统是通过矩阵来进行处理的,每个像素点都表达了其坐标的X、Y信息。Android的图形变换矩阵是一个3x3的矩阵,如下图所示:72F0CAC1-14FB-40F8-A430-8F542B09DC4E.png当使用变换…

WPF 使用 DrawingContext 绘制刻度条

WPF 使用 DrawingContext 绘制刻度条控件名:Ruler作者:WPFDevelopersOrg原文链接: https://github.com/WPFDevelopersOrg/WPFDevelopers框架使用大于等于.NET40;Visual Studio 2022;项目使用 MIT 开源许可协议;定义I…

个人中心的html,个人中心.html

个人中心$axure.utils.getTransparentGifPath function() { return resources/images/transparent.gif; };$axure.utils.getOtherPath function() { return resources/Other.html; };$axure.utils.getReloadPath function() { return resources/reload.html; };…

使用CMD命令修改Windows本地账户密码

2019独角兽企业重金招聘Python工程师标准>>> 一、以管理员身份运行cmd命令 二、在命令提示符窗口中输入命令符:net user Administrator 123,然后按回车键“Enter”。(Administrator是你的win8用户名,123是重新设置的密码。) ​ 三…

java线程安全问题原因及解决办法

1.为什么会出现线程安全问题 计算机系统资源分配的单位为进程,同一个进程中允许多个线程并发执行,并且多个线程会共享进程范围内的资源:例如内存地址。当多个线程并发访问同一个内存地址并且内存地址保存的值是可变的时候可能会发生线程安全问…

html语言怎么添加图片,我想问你一下,你是怎么在html中插入本地图片?非常感谢...

满意答案小蜜蜂手工2013.10.03采纳率:43% 等级:12已帮助:7929人img{float:right}在下面的段落中,我们添加了一个样式为 float:right 的图像。结果是这个图像会浮动到段落的右侧。This is some text. This is some text. This i…

EntityFrameworkCore上下文如何实现继承?

【导读】如果我们存在基础设施服务和其他服务,我们会定义属于基础设施服务的上下文以及其他服务的上下文, 而且会独立部署,此时其他服务需要使用基础服务,我们都会暴露基础服务接口给到其他服务调用,这也是常规操作若在…

美观又实用,10 款强大的开源 Javascript 图表库

2019独角兽企业重金招聘Python工程师标准>>> 随着发展,现代 Web 设计在改善体验和功能的同时,对于美观的追求也越来越高,可视化、交互式、动态等元素和效果似乎已成为标配。 以下是为开发者推荐的 10 款开源 Javascript 图表库&am…

EF CORE 7 RC1 发布

原文链接:https://devblogs.microsoft.com/dotnet/announcing-ef7-rc1/[1]原文作者:Jeremy Likness翻译:沙漠尽头的狼(谷歌翻译加持)Entity Framework Core 7 (EF7) Release Candidate 1 已发布!该团队专注于解决缺陷、小幅改进以…

微服务太分散?使用Fundebug集中式bug监控

摘要: 微服务日志分散,可以使用Fundebug的异常监控将它们集中起来。 当一个项目复杂到一定程度,功能越来越多,随之对应的模块也越来越多。 如果都放在一个大的项目下面,共同开发,整合发布,那么会…

html404页面怎么添加,网站要如何设置自定义404页面?

之前我们讲述过网站设置404页面对于优化或是用户体验的重要意义,大家可移步到《网站为什么要设置404页面》查看,今天我们讲解的是网站要如何设置自己的404页面。现在大多数空间商都有了404设置的功能,我们可将404页面上传至空间里面&#xff…