hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

layui框架分页设置详解_WEB前端开发

2019-12-10后端开发ki4网47°c
A+ A-

细致步骤以下:

1、从 官方文档 - 内置模块 - 数据表格 中复制以下:

2、复制到页面、将CSS地点以及JS地点改成本身当地的地点

3、浏览器运转、会涌现以下

4、发明提醒数据接口要求非常:error。

处理:

1.1将代码中的url要求地点修正成本身的地点

1.2将cols参数修正成本身接口地点返回的参数

5、然后到浏览器继承局限、照旧报错、毛病以下:

6、针对问题去看、是接口返回的数据花样不准确的

然后我们去手册看接口数据返回花样。

细致:官方文档 - 内置模块 - 数据表格 – 返回的数据

7、细致返回的数据花样以下、个中、胜利的时刻返回的code应该为0

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

8、改完本身的接口返回花样后、再次去浏览器接见、会涌现以下效果就示意接口花样以及返回的数据是准确的

9、在这块、看到的效果中、涌现分页的效果、那代码是那块影响的呢?会发明在js代码中有一段代码:page:true // 开启分页。然则照旧存在问题、展现的分页数据不准确。处理:将以下代码复制出来、写在本身代码中、将接口返回的数据赋值给对应的参数。细致操纵以下:

操纵:示例 – 组件示例 – 数据表格 – 剖析恣意数据花样 – 检察代码 - parseData

10、然后再次运转、会发明我们本身写的限定条数并没有起作用、然后再次看要求地点、会发明是经由过程get要求、牢固参数 page、limit来操纵的、同时给了默许的值;

page:1,
limit:10,

11、那怎样改成post要求呢?只需要指定要求体式格局post

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

12、运转、检察要求、以下:

13、要求参数的称号称号已晓得是page、limit 怎样修正成我们本身想要的参数名呢?

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

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

14、运转、检察要求参数、细致以下:

15、转变默许的每页显现条数

怎样将首页默许显现条数改成本身想要的?
怎样将浏览器默许显现的每页显现的条数改成本身想要的?
操纵:官方文档 – 内置模块 – 数据表格 – 基本参数一览表 – limit、limits
代码修正:

limit:3,
limits:[2,3,5],

16、运转、检察要求参数、细致以下:

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运用教程

以上就是layui框架分页设置详解的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
layui框架分页设置详解_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>