Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks-Layui-Tutorial-php.cn

Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

尚

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

nach vorne

7664 Leute haben es durchsucht

Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

Die spezifischen Schritte sind wie folgt:

1. Kopieren Sie aus offiziellen Dokumenten – Integrierte Module – Datentabelle wie folgt:

Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

2. Auf die Seite kopieren und die CSS-Adresse und JS-Adresse in Ihre lokale Adresse ändern

Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

3 wird angezeigt

Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

4. Es wurde festgestellt, dass die Datenschnittstellenanforderungsausnahme ausgelöst wurde: Fehler.

Lösung:

1.1 Ändern Sie die URL-Anfrageadresse im Code in Ihre eigene Adresse

1.2 Ändern Sie den Cols-Parameter in den Parameter, der von Ihrer eigenen Schnittstellenadresse zurückgegeben wird

Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

5. Gehen Sie dann zum Browser, um den Bereich fortzusetzen, und melden Sie weiterhin einen Fehler:

Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

6. Schauen Sie sich das Problem an. Das von der Schnittstelle zurückgegebene Datenformat ist falsch

Dann gehen wir zum Handbuch, um das Rückgabeformat der Schnittstellendaten zu sehen.

Details: Offizielles Dokument – Integriertes Modul – Datentabelle – Zurückgegebene Daten

Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

7. Das spezifische Format der zurückgegebenen Daten ist wie folgt: darunter Erfolg Der zurückgegebene Code sollte 0 sein

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

Nach dem Login kopieren

Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

8. Nachdem Sie das Rückgabeformat Ihrer Schnittstelle geändert haben, gehen Sie erneut zum Browser und der folgende Effekt wird angezeigt Das Schnittstellenformat und die zurückgegebenen Daten sind korrekt.

Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

9 In diesem Abschnitt wird der Paging-Effekt in den angezeigten Ergebnissen angezeigt. Im js-Code finden Sie einen Code: page:true // Paging aktivieren. Allerdings gibt es immer noch Probleme und die angezeigten Paging-Daten sind falsch. Lösung: Kopieren Sie den folgenden Code, schreiben Sie ihn in Ihren eigenen Code und weisen Sie die von der Schnittstelle zurückgegebenen Daten den entsprechenden Parametern zu. Die spezifischen Vorgänge sind wie folgt:

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

Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

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

page：1,
limit：10,

Nach dem Login kopieren

Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

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

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

1Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

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

1Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

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

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

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

Nach dem Login kopieren

1Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

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

1Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

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

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

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

Nach dem Login kopieren

1Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

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

Detaillierte Erläuterung der Paging-Einstellungen des Laui-Frameworks

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>

Nach dem Login kopieren

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 );
    }
}
?>

Nach dem Login kopieren