layui框架如何实现分页设置-创新互联

小编给大家分享一下layui框架如何实现分页设置,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联公司是一家集网站建设,万年企业网站建设,万年品牌网站建设,网站定制,万年网站建设报价,网络营销,网络优化,万年网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

具体步骤如下:

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

        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://scyanting.com/article/dcjjde.html