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://cdiso.cn/article/ipceeo.html
