Maison > Article > interface Web > Explication détaillée des paramètres de pagination du framework layui

Explication détaillée des paramètres de pagination du framework layui

尚avant: 2019-12-09 17:26:207542parcourir

Les étapes spécifiques sont les suivantes :

1. Copie des documents officiels - Modules intégrés - Tableau de données comme suit :

Explication détaillée des paramètres de pagination du framework layui

2. Copiez sur la page et remplacez l'adresse CSS et l'adresse JS par votre adresse locale

Explication détaillée des paramètres de pagination du framework layui

3. apparaîtra

Explication détaillée des paramètres de pagination du framework layui

4. Il a été constaté que l'exception de demande d'interface de données a été demandée : erreur.

Solution :

1.1 Modifiez l'adresse de requête url dans le code par votre propre adresse

1.2 Modifiez le paramètre cols par le paramètre renvoyé par votre propre adresse d'interface

Explication détaillée des paramètres de pagination du framework layui

5. Accédez ensuite au navigateur pour continuer la portée, et signalez toujours une erreur. L'erreur est la suivante :

Explication détaillée des paramètres de pagination du framework layui

6. Regardez le problème, Le format des données renvoyées par l'interface est incorrect

Ensuite, nous allons dans le manuel pour voir le format de retour des données de l'interface.

Détails : Document officiel - Module intégré - Tableau de données - Données renvoyées

Explication détaillée des paramètres de pagination du framework layui

7 Le format spécifique des données renvoyées est le suivant, parmi lesquels, succès Le code renvoyé doit être 0

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

Explication détaillée des paramètres de pagination du framework layui

8. Après avoir modifié le format de retour de votre interface, accédez à nouveau au navigateur et l'effet suivant apparaîtra, indiquant le format de l'interface et les données renvoyées sont correctes

Explication détaillée des paramètres de pagination du framework layui

9. Dans cette section, l'effet de pagination apparaît dans les résultats que vous voyez. Quel morceau de code est affecté ? Vous trouverez un bout de code dans le code js : page:true // Activer la pagination. Cependant, des problèmes subsistent et les données de pagination affichées sont incorrectes. Solution : copiez le code suivant, écrivez-le dans votre propre code et affectez les données renvoyées par l'interface aux paramètres correspondants. Les opérations spécifiques sont les suivantes :

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

Explication détaillée des paramètres de pagination du framework layui

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

page：1,
limit：10,

Explication détaillée des paramètres de pagination du framework layui

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

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

1Explication détaillée des paramètres de pagination du framework layui

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

1Explication détaillée des paramètres de pagination du framework layui

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

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

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

1Explication détaillée des paramètres de pagination du framework layui

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

1Explication détaillée des paramètres de pagination du framework layui

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

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

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

1Explication détaillée des paramètres de pagination du framework layui

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

Explication détaillée des paramètres de pagination du framework layui

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

Articles Liés

Voir plus