LayUI paging process
数据展示是以表格的形式展示的。使用模块如下：
首先使用内置模块-数据表格
然后使用内置模块-分页
官方文档地址：[https://www.layui.com/doc/]:https://www.layui.com/doc/
官方示例地址：[https://www.layui.com/demo/](https://www.layui.com/demo/)Note problems:
1, the interface returns the data formats
2, a request to change the mode
3, a request to change the name of the parameter
4, the amount of data on how to change the home page, and the page number display bar
5, the final tab codes
Specific steps are as follows:
1, from the official documents ( https://www.layui.com/doc/ ) - Built-in modules - Data Form ( https://www.layui.com/doc/modules/table.html ) are reproduced below:
2, copied to the page, CSS and JS address to address their own local address
3, the browser is running, there will be the following
4, data interface requests abnormal findings suggest that: error.
解决：
1.1将代码中的url请求地址修改为自己的地址
1.2将cols参数修改成自己接口地址返回的参数
5, and then continue to the browser range, still being given the wrong follows:
6, for the issue to see, is the interface returned data malformed
然后我们去手册看接口数据返回格式。
具体：文档(https://www.layui.com/doc/) – 内置模块 – 数据表格(https://www.layui.com/doc/modules/table.html) – 返回的数据
7, the specific return data format, wherein, when the success return code should be 0
{
"code": 0,
"msg": "",
"count": 1000,
"data": [ {},{},{} ]
}
8, changed completely after his return form the interface, browser again to visit, there will be an effect says that the interface format and the data returned is correct
9, the result of this, see, the effect of paging occurs, it is a piece of code that affect it? You will find a piece of code in js code: page: true // open the page. But the problem still exists, display paged data is incorrect. Solution: Copy the following code out, write in your own code, the interface will return the data assigned to the corresponding parameter. Specific operation is as follows:
操作：示例(https://www.layui.com/demo/) – 组件示例 – 数据表格(https://www.layui.com/doc/modules/table.html) – 解析任意数据格式 – 查看代码 - parseData
10, and then run it again, you will find our own written several restrictions do not work, then look at the request address again, you see that they get by request, fixed parameters page, limit to operate, at the same time to the default value;
page：1,
limit：10,
11, how that changed post request it? Only you need to specify the request method post
操作：文档(https://www.layui.com/doc/) – 内置模块 – 数据表格(https://www.layui.com/doc/modules/table.html) – 异步数据接口(https://www.layui.com/doc/modules/table.html#async) – method
12, run, view the request as follows:
13、请求参数的名称名称已经知道是page、limit 如何修改为我们自己想要的参数名呢？
操作：文档(https://www.layui.com/doc/) – 内置模块 – 数据表格(https://www.layui.com/doc/modules/table.html) – 异步数据接口(https://www.layui.com/doc/modules/table.html#async) – request
代码：request: {
pageName: 'page', // 页码的参数名称，默认：page
limitName: 'size' // 每页数据量的参数名，默认：limit
}
14、运行、查看请求参数、具体如下：
15、改变默认的每页显示条数
如何将首页默认显示条数改为自己想要的？
如何将浏览器默认显示的每页显示的条数改为自己想要的？
操作：文档(https://www.layui.com/doc/) – 内置模块 – 数据表格 – 基础参数一览表 – 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 );
}
}
?>