LayUI的基本使用 - 分页
LayUI 分页处理
数据展现是以表格的形式展现的。使用模块以下：
首先使用内置模块-数据表格
而后使用内置模块-分页
官方文档地址：https://www.layui.com/doc/
官方示例地址：https://www.layui.com/demo/php
注意问题：
一、接口返回的数据格式
二、请求方式的改变
三、请求参数名称的改变
四、如何改变首页的数据量、以及每页显示条数
五、最终的分页代码css
具体步骤以下：
一、从 官方文档 - 内置模块 - 数据表格 中复制以下：
二、复制到页面、将CSS地址以及JS地址改成本身本地的地址
三、浏览器运行、会出现以下
四、发现提示数据接口请求异常：error。
解决： 1.1将代码中的url请求地址修改成本身的地址 1.2将cols参数修改为本身接口地址返回的参数
五、而后到浏览器继续范围、依旧报错、错误以下：
六、针对问题去看、是接口返回的数据格式不正确的
而后咱们去手册看接口数据返回格式。 具体：官方文档 - 内置模块 - 数据表格 – 返回的数据
七、具体返回的数据格式以下、其中、成功的时候返回的code应该为0
{
"code": 0,
"msg": "",
"count": 1000,
"data": [ {},{},{} ]
}
八、改完本身的接口返回格式后、再次去浏览器访问、会出现以下效果就表示接口格式以及返回的数据是正确的
九、在这块、看到的结果中、出现分页的效果、那代码是那块影响的呢？会发如今js代码中有一段代码：page:true // 开启分页。可是依旧存在问题、展现的分页数据不正确。解决：将以下代码复制出来、写在本身代码中、将接口返回的数据赋值给对应的参数。具体操做以下：
操做：示例 – 组件示例 – 数据表格 – 解析任意数据格式 – 查看代码 - parseData
十、而后再次运行、会发现咱们本身写的限制条数并无起做用、而后再次看请求地址、会发现是经过get请求、固定参数 page、limit来操做的、同时给了默认的值；
page：1, limit：10,
十一、那如何改成post请求呢？只须要指定请求方式post
操做：官方文档 - 内置模块 - 数据表格 – 异步数据接口 – method
十二、运行、查看请求、以下：
1三、请求参数的名称名称已经知道是page、limit 如何修改成咱们本身想要的参数名呢？
操做：官方文档 - 内置模块 - 数据表格 – 异步数据接口 – request 代码：
request: {
pageName: 'page', // 页码的参数名称，默认：page
limitName: 'size' // 每页数据量的参数名，默认：limit
}
1四、运行、查看请求参数、具体以下：
1五、改变默认的每页显示条数
如何将首页默认显示条数改成本身想要的？ 如何将浏览器默认显示的每页显示的条数改成本身想要的？ 操做：官方文档 – 内置模块 – 数据表格 – 基础参数一览表 – limit、limits 代码修改：
limit：3， limits：[2,3,5],
1六、运行、查看请求参数、具体以下：
1七、最终的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>
1八、接口使用的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 );
}
}
?>