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. [铁人赛] ASP.NET Core 2 系列- 从头开始

    来势汹汹的.NET Core似乎要取代.NET Framework,ASP.NET也随之发布.NET Core版本.虽说名称沿用ASP.NET,但相较于ASP.NET确有许多架构上的差异,可说是除了名 ...

  2. Java基础(三) String深度解析

    String可以说是Java中使用最多最频繁.最特殊的类,因为同时也是字面常量,而字面常量包括基本类型.String类型.空类型. 一. String的使用 1. String的不可变性 /** * ...

  3. java集合框架collection(3)Set、List和Map

    Set.List和Map是java collection中最常用的三种数据结构. Set是集合,不允许有重复的元素,List是动态数组实现的列表,有序可重复,Map是key-value的键值对,用于快 ...

  4. Hive 学习之路（六）—— Hive 视图和索引

    一.视图 1.1 简介 Hive 中的视图和RDBMS中视图的概念一致,都是一组数据的逻辑表示,本质上就是一条SELECT语句的结果集.视图是纯粹的逻辑对象,没有关联的存储(Hive 3.0.0引入的 ...

  5. MyBatis从入门到精通(五)：MyBatis 注解方式的基本用法

    最近在读刘增辉老师所著的<MyBatis从入门到精通>一书,很有收获,于是将自己学习的过程以博客形式输出,如有错误,欢迎指正,如帮助到你,不胜荣幸! 1. @Select 注解 1.1 使 ...

  6. [Vue 牛刀小试]：第十五章 - 传统开发模式下的 axios 使用入门

    一.前言 在没有接触 React.Angular.Vue 这类 MVVM 的前端框架之前,无法抛弃 Jquery 的重要理由,除了优秀的前端 DOM 元素操作性以外,能够非常便捷的发起 http 请求 ...

  7. Codeforces 730J：Bottles（背包dp）

    http://codeforces.com/problemset/problem/730/J 题意:有n个瓶子,每个瓶子有一个当前里面的水量,还有一个瓶子容量,问要把所有的当前水量放到尽量少的瓶子里至 ...

  8. Codeforces 755C：PolandBall and Forest（并查集）

    http://codeforces.com/problemset/problem/755/C 题意:该图是类似于树,给出n个点,接下来p[i]表示在树上离 i 距离最远的 id 是p[i],如果距离相 ...

  9. ubuntu18.04上搭建KVM虚拟机环境超完整过程

    看标题这是篇纯运维的文章.在中小型企业中,一般很少配置专业的运维人员,都是由开发人员兼着.同时,对有志于技术管理的开发人员来说,多了解一些运维及整个软件生命周期的知识,是很有帮助的,因为带团队不仅仅是 ...

  10. kuangbin专题 专题一 简单搜索 Prime Path POJ - 3126

    题目链接:https://vjudge.net/problem/POJ-3126 题意:给你两个四位的素数N,M,每次改变N四位数中的其中一位,如果能经过有限次数的替换变成四位数M,那么求出最少替换次 ...