Detailed explanation of layui framework paging settings-Layui Tutorial-php.cn

Detailed explanation of layui framework paging settings

尚

Release： 2019-12-09 17:26:20

forward

7668 people have browsed it

Detailed explanation of layui framework paging settings

The specific steps are as follows:

1. Copy the following from the official document - built-in module - data table:

Detailed explanation of layui framework paging settings

2. Copy to the page and change the CSS address and JS address to your local address

Detailed explanation of layui framework paging settings

3. When the browser is run, the following will appear

Detailed explanation of layui framework paging settings

4. Found that the data interface request exception was prompted: error.

Solution:

1.1 Change the url request address in the code to your own address

1.2 Change the cols parameter to the parameter returned by your own interface address

Detailed explanation of layui framework paging settings

5. Then go to the browser to continue the scope, and the error is still reported. The error is as follows:

Detailed explanation of layui framework paging settings

6. Look at the problem, The data format returned by the interface is incorrect

Then we go to the manual to see the interface data return format.

Details: Official document - built-in module - data table - returned data

Detailed explanation of layui framework paging settings

7. The specific returned data format is as follows, among which, success The returned code should be 0

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

Copy after login

Detailed explanation of layui framework paging settings

8. After changing the return format of your interface, go to the browser again and the following effect will appear, indicating the interface format and The returned data is correct

Detailed explanation of layui framework paging settings

9. In this block, the paging effect appears in the results you see. Which block of code is affected? You will find a piece of code in the js code: page:true // Turn on paging. However, there are still problems, and the paging data displayed is incorrect. Solution: Copy the following code, write it in your own code, and assign the data returned by the interface to the corresponding parameters. The specific operations are as follows:

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

Detailed explanation of layui framework paging settings

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

page：1,
limit：10,

Copy after login

Detailed explanation of layui framework paging settings

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

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

1Detailed explanation of layui framework paging settings

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

1Detailed explanation of layui framework paging settings

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

操作：官方文档 - 内置模块 - 数据表格 – 异步数据接口 – request代码：

request: {
    pageName: &#39;page&#39;,   // 页码的参数名称，默认：page
    limitName: &#39;size&#39;   // 每页数据量的参数名，默认：limit
}

Copy after login

1Detailed explanation of layui framework paging settings

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

1Detailed explanation of layui framework paging settings

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

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

limit：3，
limits：[2,3,5],

Copy after login

1Detailed explanation of layui framework paging settings

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

Detailed explanation of layui framework paging settings

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(&#39;table&#39;, function () {
            var table = layui.table;
            //第一个实例
            table.render({
                elem: &#39;#demo&#39;
                , url: &#39;http://localhost/php/public/index.php/index/index/index&#39; //数据接口
                , method: &#39;post&#39;
                , page: true //开启分页
                , limit: 3
                , limits: [2, 3, 5]
                , cols: [[
                    { width: 80, type: &#39;checkbox&#39; },
                    { field: &#39;type_id&#39;, width: 80, title: &#39;ID&#39;, sort: true },
                    { field: &#39;type_name&#39;, title: &#39;分类名称&#39;, sort: true }
                ]],
                parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.data //解析数据列表
                    };
                },
                request: {
                    pageName: &#39;page&#39; // 页码的参数名称，默认：page
                    , limitName: &#39;size&#39; //每页数据量的参数名，默认：limit
                },
            });
        });
    </script>
</body>

</html>

Copy after login

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( &#39;size&#39;, 3 );
        $page = Request::instance()->post( &#39;page&#39;, 1 );
        $res = Db::table( &#39;goods_type&#39; )->paginate( $size, false, [ &#39;page&#39;=> $page] );
        $arr[&#39;code&#39;] = 0;
        $arr[&#39;msg&#39;] = &#39;ok&#39;;
        $arr[&#39;data&#39;] = $res;
        return json( $arr );
    }
}
?>

Copy after login