layui框架实现分页的方法-创新互联

这篇文章运用简单易懂的例子给大家介绍layui框架实现分页的方法，代码非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。                                                      1、从 官方文档 - 内置模块 - 数据表格 中复制如下：

创新互联专注于蒸湘网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供蒸湘营销型网站建设，蒸湘网站制作、蒸湘网页设计、蒸湘网站官网定制、微信小程序开发服务，打造蒸湘网络公司原创品牌,更为您提供蒸湘网站排名全网营销落地服务。

layui框架实现分页的方法

2、复制到页面、将CSS地址以及JS地址改为自己本地的地址

layui框架实现分页的方法

3、浏览器运行、会出现如下

layui框架实现分页的方法

4、发现提示数据接口请求异常：error。

解决：

1.1将代码中的url请求地址修改为自己的地址

1.2将cols参数修改成自己接口地址返回的参数

layui框架实现分页的方法

5、然后到浏览器继续范围、依旧报错、错误如下：

layui框架实现分页的方法

6、针对问题去看、是接口返回的数据格式不正确的

然后我们去手册看接口数据返回格式。

具体：官方文档 - 内置模块 - 数据表格 – 返回的数据

layui框架实现分页的方法

7、具体返回的数据格式如下、其中、成功的时候返回的code应该为0

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

layui框架实现分页的方法

8、改完自己的接口返回格式后、再次去浏览器访问、会出现如下效果就表示接口格式以及返回的数据是正确的

layui框架实现分页的方法

9、在这块、看到的结果中、出现分页的效果、那代码是那块影响的呢？会发现在js代码中有一段代码：page:true // 开启分页。但是依旧存在问题、展示的分页数据不正确。解决：将如下代码复制出来、写在自己代码中、将接口返回的数据赋值给对应的参数。具体操作如下：

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

layui框架实现分页的方法

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

page：1,
limit：10,

layui框架实现分页的方法

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

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

layui框架实现分页的方法

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

layui框架实现分页的方法

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

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

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

layui框架实现分页的方法

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

layui框架实现分页的方法

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

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

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

layui框架实现分页的方法

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

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

以上便是layui框架实现分页的方法，虽然从篇幅上看很复杂，但是示例代码非常详细且容易理解，如果想了解更多相关内容，请关注创新互联成都网站设计公司行业资讯。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页名称：layui框架实现分页的方法-创新互联
路径分享：https://www.cdcxhl.com/article48/dsoshp.html

成都网站建设公司_创新互联，为您提供搜索引擎优化、品牌网站建设、服务器托管、建站公司、定制网站、网站改版

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

成都定制网站网页设计

服务器托管知识

各行业网站