LayUI 分页处理

数据展示是以表格的形式展示的。使用模块如下:

首先使用内置模块-数据表格

然后使用内置模块-分页

官方文档地址:https://www.layui.com/doc/

官方示例地址:https://www.layui.com/demo/

注意问题:

1、接口返回的数据格式

2、请求方式的改变

3、请求参数名称的改变

4、如何改变首页的数据量、以及每页显示条数

5、最终的分页代码

具体步骤如下:

1、从 官方文档 - 内置模块 - 数据表格 中复制如下:

2、复制到页面、将CSS地址以及JS地址改为自己本地的地址

3、浏览器运行、会出现如下

4、发现提示数据接口请求异常:error。

解决:
1.1将代码中的url请求地址修改为自己的地址
1.2将cols参数修改成自己接口地址返回的参数

5、然后到浏览器继续范围、依旧报错、错误如下:

6、针对问题去看、是接口返回的数据格式不正确的

然后我们去手册看接口数据返回格式。
具体:官方文档 - 内置模块 - 数据表格 – 返回的数据

7、具体返回的数据格式如下、其中、成功的时候返回的code应该为0

{
"code": 0,
"msg": "",
"count": 1000,
"data": [ {},{},{} ]
}

8、改完自己的接口返回格式后、再次去浏览器访问、会出现如下效果就表示接口格式以及返回的数据是正确的

9、在这块、看到的结果中、出现分页的效果、那代码是那块影响的呢?会发现在js代码中有一段代码:page:true // 开启分页。但是依旧存在问题、展示的分页数据不正确。解决:将如下代码复制出来、写在自己代码中、将接口返回的数据赋值给对应的参数。具体操作如下:

操作:示例 – 组件示例 – 数据表格 – 解析任意数据格式 – 查看代码 - parseData

10、然后再次运行、会发现我们自己写的限制条数并没有起作用、然后再次看请求地址、会发现是通过get请求、固定参数 page、limit来操作的、同时给了默认的值;

page:1,
limit:10,

11、那如何改为post请求呢?只需要指定请求方式post

操作:官方文档 - 内置模块 - 数据表格 – 异步数据接口 – method

12、运行、查看请求、如下:

13、请求参数的名称名称已经知道是page、limit 如何修改为我们自己想要的参数名呢?

操作:官方文档 - 内置模块 - 数据表格 – 异步数据接口 – request
代码:
request: {
pageName: 'page', // 页码的参数名称,默认:page
limitName: 'size' // 每页数据量的参数名,默认:limit
}

14、运行、查看请求参数、具体如下:

15、改变默认的每页显示条数

如何将首页默认显示条数改为自己想要的?
如何将浏览器默认显示的每页显示的条数改为自己想要的?
操作:官方文档 – 内置模块 – 数据表格 – 基础参数一览表 – limit、limits
代码修改:
limit:3,
limits:[2,3,5],

16、运行、查看请求参数、具体如下:

17、最终的html代码如下:

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>table模块快速使用</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head> <body>
<table id="demo" lay-filter="test"></table>
<script src="./layui/layui.js"></script>
<script>
layui.use('table', function () {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
, url: 'http://localhost/php/public/index.php/index/index/index' //数据接口
, method: 'post'
, page: true //开启分页
, limit: 3
, limits: [2, 3, 5]
, cols: [[
{ width: 80, type: 'checkbox' },
{ field: 'type_id', width: 80, title: 'ID', sort: true },
{ field: 'type_name', title: '分类名称', sort: true }
]],
parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.data.total, //解析数据长度
"data": res.data.data //解析数据列表
};
},
request: {
pageName: 'page' // 页码的参数名称,默认:page
, limitName: 'size' //每页数据量的参数名,默认:limit
},
});
});
</script>
</body> </html>

18、接口使用的TP5.0 没有使用模型层、具体简单代码如下:

<?php

namespace app\index\controller;

use think\Controller;
use think\Db;
use think\Request; class Index extends Controller
{
public function index()
{
$size = Request::instance()->post( 'size', 3 );
$page = Request::instance()->post( 'page', 1 );
$res = Db::table( 'goods_type' )->paginate( $size, false, [ 'page'=> $page] );
$arr['code'] = 0;
$arr['msg'] = 'ok';
$arr['data'] = $res;
return json( $arr );
}
}
?>

7月新的开始 - LayUI的基本使用 - 分页的更多相关文章

  1. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

  2. Azure 12 月新公布

    Azure 12 月新发布:人脸识别 API 推出更新,媒体服务当前几种计量方式的调整,Azure Media Redactor 提供预览, Azure 密钥保管库开始计费, 和 Azure 支付方式 ...

  3. Azure 11 月新公布

    Azure 11 月新发布:Apple FairPlay Streaming, 应用服务(App Service), 虚拟机规模集(VMSS) Azure 媒体服务的 Apple FairPlay S ...

  4. Azure 10月新公布

    Azure 10月新发布:F 系列计算优化实例,认知服务,媒体服务流式处理单元更名,Azure 镜像市场,FreeBSD 适用于Azure 虚拟机的全新 F 系列计算优化实例 Azure 虚拟机的全新 ...

  5. Azure 2 月新公布

    Azure 2 月新发布:关于虚机和云服务的降价通告,Azure SQL 数据仓库正式发布,Microsoft 认知服务:人脸识别 API 定价模式和名称更新,以及计量名称变更 关于虚机和云服务的降价 ...

  6. Azure 1 月新公布

    Azure 1 月新发布:Microsoft Power BI Embedded 公共预览和计算机视觉 API 标准版的更新以及 Azure IoT 网关 SDK 和中心设备管理新功能正式发布以及关于 ...

  7. Azure 5 月新公布(二)

    Azure 5 月新发布(二):CDN 图片处理功能, CDN Restful API, 新版 CDN 管理门户, 计量名称变更延期  Azure CDN 图片处理功能开放公共预览版 Azure CD ...

  8. Azure 5 月新公布

    Azure 5 月新发布:CDN 高级版服务降价,MySQL Database 高级版本和新功能,以及应用程序网关中的 WAF 层发布   Azure CDN 高级版服务自 2017 年 5 月 1 ...

  9. Azure 4月新公布

    Azure 4 月新发布:Linux 上的 Azure Service Fabric 公共预览版正式发布:Azure 物联网套件新增设备管理功能:计量名称变更 Linux 上的 Azure Servi ...

随机推荐

  1. <房间内功能>打赏小动画

    截图如下 :        功能:   每次点击礼物,都要通过动画显示一个小图标,最多显示两行图标栏,送多次会显示然后再次显示,显示 XX 送给 XX 一个小礼物的动画样式.动画样式效果为,整体动画模 ...

  2. hive Metastore contains multiple versions

    凌晨接到hive作业异常,hive版本为1.2.1,hadoop版本apache 2.7.1,元数据存储在mysql中,异常信息如下: Logging initialized using config ...

  3. abp(net core)+easyui+efcore仓储系统——定义仓储并实现 (四)

    abp(net core)+easyui+efcore仓储系统目录 abp(net core)+easyui+efcore仓储系统——ABP总体介绍(一) abp(net core)+easyui+e ...

  4. Spring Boot的学习之路(03):基础环境搭建,做好学习前的准备工作

    1. 前言 <论语·魏灵公>:"工欲善其事,必先利其器.居是邦也,事其大夫之贤者,友其士之仁者." 工欲善其事必先利其器.我们在熟悉一个陌生项目的时候,首先会大概去看一 ...

  5. 移动IM开发指南1:如何进行技术选型

    <移动IM开发指南>系列文章将会介绍一个IM APP的方方面面,包括技术选型.登陆优化等.此外,本文作者会结合他在网易云信多年iOS IM SDK开发的经验,深度分析实际开发中的各种常见问 ...

  6. Hadoop 学习之路(三)—— 分布式计算框架 MapReduce

    一.MapReduce概述 Hadoop MapReduce是一个分布式计算框架,用于编写批处理应用程序.编写好的程序可以提交到Hadoop集群上用于并行处理大规模的数据集. MapReduce作业通 ...

  7. spring 5.x 系列第5篇 —— 整合 mybatis + druid 连接池 (xml配置方式)

    源码Gitub地址:https://github.com/heibaiying/spring-samples-for-all 项目目录结构 1.创建maven工程,除了Spring基本依赖外,还需要导 ...

  8. 15 | 过不了的坎:聊聊GUI自动化过程中的测试数据

  9. HTML5新增的表单验证功能

    一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...

  10. 浅谈labviEW定时器

    Labview提供了五种定时器:普通定时器3种: Tick Count (ms). Wait(ms).Wait Until Next ms  Multipule(等待下一个毫秒的整数倍) API函数定 ...