网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

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代码如下:





    
    table模块快速使用
    



    

18、接口使用的TP5.0 没有使用模型层、具体简单代码如下:

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框架实现分页的方法
文章位置:http://bjjierui.cn/article/ipceeo.html

其他资讯