利用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,一经查实,立即删除!

相关文章

Linux系统压缩及解压缩

Linux系统解压缩概述:本篇将介绍Linux系统中的压缩和解压缩的工具,以及归档工具(tar,cpio)compress/uncompress:对应 .Z 结尾的压缩格式文件;gzip/gunzip:其对应的是 .gz 结尾的压缩…

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

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

学习RUNOOB.COM进度一

了解MongoDB 由C语言编写的,是一个基于分布式文件存储的开源数据库系统。在高负载的情况下,添加更多的节点,可以保证服务器性能。 特点 面向文档,操作简单容易 设置任何索引,实现更快排序 本地或者网络创建数据镜像&am…

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

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

MVC学习九:MVC 特性本质

一、特性的本质就是:对属性、方法、类加特性,本质就是new 一个特性类对象赋值给属性、方法、类。 可以通过反射的方式取得特性的值,代码如下: ①自定义特性 public class MyAttribute:Attribute{public string Name { get; set; }…

前端知识点总结---面试专用

1.关于基础css html js部分 1.1基本算法 1&#xff09;快速排序 时间复杂度 nlogn function quickSort(arr){if (arr.length<1){return arr;}var pivotIndex 0,pivort arr.splice(pivortIndex, 1)[0];var left [],right [];for (var i 1, length arr.length; i < l…

鸿蒙系统大疆,华为操作系统“鸿蒙OS”来了!

原标题&#xff1a;华为操作系统“鸿蒙OS”来了&#xff01;8月9日&#xff0c;华为消费者业务CEO余承东在华为开发者大会上如期发布了华为鸿蒙操作系统“HarmonyOS”。据介绍&#xff0c;鸿蒙内核在2017年便完成技术验证&#xff0c;最初是为了提升操作系统的跨平台能力而研发…

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

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

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

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

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

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

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

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

.Net之接口小知识

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

你所不知道的setTimeout

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

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

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

WPF 使用 DrawingContext 绘制刻度条

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

纯css实现漂亮又健壮的tooltip

前言 tooltip的实现有多种方式&#xff0c;下面是一个tooltip成长史。 预览 https://codepen.io/moddx/pen/... 原始版 最简单的莫过于就用原始title属性&#xff0c;像这样&#xff1a; <button title"tips">button</button> 缺点是体验是差了点&#x…

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

&#xfeff;个人中心$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命令 二、在命令提示符窗口中输入命令符&#xff1a;net user Administrator 123&#xff0c;然后按回车键“Enter”。(Administrator是你的win8用户名&#xff0c;123是重新设置的密码。) ​ 三…

Android 编译时:m、mm、mmm、mma、mmma的区别

m&#xff1a;编译整个安卓系统 makes from the top of the tree mm&#xff1a;编译当前目录下的模块&#xff0c;当前目录下需要有Android.mk这个makefile文件&#xff0c;否则就往上找最近的Android.mk文件。 builds all of the moudles in the current directory mma&#…