layui是一个前端 UI 框架,内置了js代码,所以我们可以直接使用内置的分页

首先要用到layui的官网手册https://www.layui.com/

1.进入手册页面的 ”示例“

2.在示例中找到 “数据表格” -> “开启分页” -> "查看代码" 。这就是layui内置的分页代码,复制到编辑器即可;

3.注意红色框中的两个引入文件的地址,(如果没有layui文件,可以去官网下载)

4.修改上图黄色框中的内容,意思分别是

  elem:展示数据的table表格,

  url:地址/接口,

  cols:展示内容,

  field:获取回来的数据字段名,

  width:单元格的宽度,

  title:表格的表头名,

  sort:给该列使用排序功能,

  page:true 开启下方分页按钮,

5.给表格指出正确的数据位置 ,”文档“(在示例的旁边)->” 数据表格“  -> ctrl+f 搜索   parseData   复制红色框中的代码

 放置到刚才粘贴页面的 " page:true "下面,修改好返回数据的层级关系。

6.还可以设置一些其他东西  如下图 (黄色框中的代码就是 "步骤5" 中代码的存放位置  )

上图红色框中的内容的意思为:

  limit:每页默认显示条数,

  limits:下拉框页码中的值,

  where:发送条件值,

  method:数据请求方式,

以上基本上就是layui 分页的详细步骤了   是不是很简单? O(∩_∩)O

(其实很多功能查看手册,在手册上复制代码就能实现)  

使用layui实现分页展示数据库的数据的更多相关文章

  1. Python Django CMDB项目实战之-2创建APP、建模(models.py)、数据库同步、高级URL、前端页面展示数据库中数据

    基于之前的项目代码来编写 Python Django CMDB项目实战之-1如何开启一个Django-并设置base页index页文章页面 现在我们修改一个文章列表是从数据库中获取数据, 下面我们就需 ...

  2. jsp 分页(数据库读取数据)

    <%@ page contentType="text/html; charset=gb2312"%> <%@ page language="java&q ...

  3. Java Web中将oracle的数据库内容以表格形式展现到页面中(分页展示)

    分页SQL语句: ----分页显示 select * from (select rownum as r,t.* from () ; 查询的结果如下: 这个SQL,使用了三层嵌套的查询方式: 1)最内层 ...

  4. MySQL+Service+Servlet+Jsp实现Table表格分页展示数据

    下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...

  5. layui table 分页 记住之前勾选的数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Layui使用table展示数据

    今天在Layui官网拿了一个table表格数据展示的源码,研究遇到了很多问题,最后才把数据展示出来,和大家分享下. 源码地址:https://www.layui.com/demo/table/oper ...

  7. jsp案例--展示数据库中的数据

    一.什么是jsp? JAVA SERVER PAGES java的动态网页,servlet用来获取数据处理业务,擅长处理与java代码有关的内容.jsp展示数据,擅长处理与html有关的内容. 二.如 ...

  8. springboot滚动分页展示列表(类似layui瀑布流效果)

    背景: 公司项目要求获取用户关联的好友列表,要求分页查询,十条数据一页,滚动页面是点击加载更多,显示下一页列表. ​ 示例图: 实现: 本项目采用的前端模板是freemaker,主要前端页面代码(没有 ...

  9. 项目总结17-使用layui table分页表格

    项目总结17-使用layui table分页表格总结 前言 在项目中,需要用到分页的表格来展示数据,发现layui的分页表格,是一个很好的选择:本文介绍layui table分页表格的前后端简单使用 ...

  10. C#-WebForm-组合查询(Queryable延迟查询、Intersect交集)、分页展示基础

    组合查询: 方法一:Queryable<> 延迟查询 其特点是:读到词句代码时不会立即执行,而是在进行数据绑定时执行 优点:此期间可以进行添加查询条件,以减少数据库查询内容,来减少内存占用 ...

随机推荐

  1. ROS多机通讯

    1.主机: sudo /etc/hosts 写入从机的地址和用户名: 192.168.31.14    raspi2 2.从机 sudo /etc/hosts 写入主机的地址和用户名 192.168. ...

  2. Osx10.14升级watchman踩坑记

    背景 使用 watchman 检测文件变化通知非常的好用, 但有些时候会出现 watchman 占用内存和 CPU 特别疯狂, 通过 watch-del 也无济与事, 由于 watchman 的版本 ...

  3. Rigol DSA815频谱仪在合肥光源工作点测量系统中的应用

    发的这篇文,我只是搬运工,读者切记. 合肥光源工作点测量系统已实现BBQ无激励在线测量,还是前些年永良师弟在这的时候调试成功的,并和超才把安捷伦的一台频谱仪和普源的DSA815的IOC调试成功,不过在 ...

  4. DIVFusion_ Darkness-free infrared and visible image fusion 论文解读

    研究 背景: ​ 当前图像融合方法都是针对正常照明的红外与可见光图像设计的,无法有效处理夜景下的情况. ​ 而针对夜景下的融合可以分为以下两个步骤,1 可见光图像增强,2 可见光图像与红外图像融合.但 ...

  5. JZOJ 1166. 树中点对距离

    题面 思路 本蒟蒻第一次学点分治,正遇模板题,留个模板代码 \(Code\) #include<cstdio> #include<algorithm> using namesp ...

  6. JZOJ 6801. NOIP2020.9.19模拟patrick

    题目大意 动态维护数列中大于等于某个数的极长连续段的个数. 思路 我们考虑每段的开头,记为 \(i\),高度为 \(a_i\) 那么此时水淹的高度必然满足 \(a_{i-1} < x \leq ...

  7. 前端随笔0:URL与状态的双向绑定

    记录一些最近写前端的思考总结,也算是给自己的技术随笔开个篇 在接触以 React,Vue 为代表的工程化前端框架前,我还是一个拿着 jQuery 手撸特效和手写 CSS 的切图仔,捣鼓 Vue 时接触 ...

  8. Switchquery:移动端秒级配置触达平台

    作者:京东零售 胡本奎 一 背景 随着移动互联网的快速发展,为满足各类用户及人群的体验需求,移动端的开发者们开发了丰富多彩的体验与功能.同时对于快速控制各类功能的切换.灰度,降级等能力的要求也越来越高 ...

  9. 常用的"小脚本"-json数据处理

    小背景: 我们公司项目中的小脚本是一些工具类,比如常用的是MapUtil工具类的一些方法 写公司的MapUtil工具类的方法要注意,方法名的命名,因为方法名,在公司的项目的某个业务流程有对方法名的进行 ...

  10. mac系统上hdfs java api的简单使用

    目录 1.背景 2.环境准备 3.环境搭建 3.1 引入jar包 3.2 引入log4j.properties配置文件 3.3 初始化Hadoop Api 4.java api操作 4.1 创建目录 ...