ホームページ > 記事 > ウェブフロントエンド > Lauiuiフレームワークのページング設定の詳細な説明

Lauiuiフレームワークのページング設定の詳細な説明

尚転載: 2019-12-09 17:26:207541ブラウズ

具体的な手順は次のとおりです:

1. 公式ドキュメント - 組み込みモジュール - データテーブルから次の内容をコピーします:

Lauiuiフレームワークのページング設定の詳細な説明

2. ページにコピーし、CSS アドレスと JS アドレスをローカルアドレスに変更します

Lauiuiフレームワークのページング設定の詳細な説明

3. ブラウザを実行すると、

Lauiuiフレームワークのページング設定の詳細な説明

4. データインターフェイス要求の例外が要求されたことがわかりました: エラー。

解決策:

1.1 コード内の URL リクエストアドレスを独自のアドレスに変更します

1.2 Cols パラメーターを独自のインターフェイスアドレスによって返されるパラメーターに変更します

Lauiuiフレームワークのページング設定の詳細な説明

5. その後、ブラウザに移動してスコープを続行しても、引き続きエラーが報告されます。エラーは次のとおりです:

Lauiuiフレームワークのページング設定の詳細な説明

6. インターフェイスから返されるデータ形式が間違っているという問題を見てください。

##次に、マニュアルを参照してインターフェイスデータの戻り形式を確認します。

詳細: 公式ドキュメント - 組み込みモジュール - データテーブル - 返されるデータ

Lauiuiフレームワークのページング設定の詳細な説明

7. 具体的な返されるデータの形式は次のとおりです。そのうち、成功した場合、返されるコードは 0

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

Lauiuiフレームワークのページング設定の詳細な説明

8 になるはずです。インターフェイスの戻り形式を変更した後、ブラウザに再度アクセスすると、次のような効果が表示されます。インターフェイス形式と返されたデータは正しいです

Lauiuiフレームワークのページング設定の詳細な説明

9。このブロックでは、表示される結果にページング効果が表示されます。コードのどのブロックが影響を受けますか? js コード内に次のコード部分があります。 page:true // ページングをオンにします。ただし、まだ問題があり、表示されるページングデータが正しくありません。解決策: 次のコードをコピーして独自のコードに記述し、インターフェイスから返されたデータを対応するパラメーターに割り当てます。具体的な操作は次のとおりです。

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

Lauiuiフレームワークのページング設定の詳細な説明

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

page：1,
limit：10,

Lauiuiフレームワークのページング設定の詳細な説明

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

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

1Lauiuiフレームワークのページング設定の詳細な説明

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

1Lauiuiフレームワークのページング設定の詳細な説明

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

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

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

1Lauiuiフレームワークのページング設定の詳細な説明

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

1Lauiuiフレームワークのページング設定の詳細な説明

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

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

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

1Lauiuiフレームワークのページング設定の詳細な説明

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

Lauiuiフレームワークのページング設定の詳細な説明

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>

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

Lauiuiフレームワークのページング設定の詳細な説明

関連記事