Layui 프레임워크 페이징 설정에 대한 자세한 설명
- 尚앞으로
- 2019-12-09 17:26:207630검색
구체적인 단계는 다음과 같습니다.
1. 공식 문서 - 내장 모듈 - 데이터 테이블에서 다음과 같이 복사합니다.
2.페이지에 복사하고 JS 주소를 변경합니다. 자신의 로컬 주소로
3. 브라우저가 실행되면 다음이 표시됩니다.
4. 오류가 발생했습니다.
해결책:
1.1 코드의 URL 요청 주소를 자신의 주소로 수정하세요.
1.2 cols 매개변수를 자신의 인터페이스 주소
5에서 반환된 매개변수로 수정하세요.
6. 문제를 살펴보면 인터페이스에서 반환한 데이터 형식이 올바르지 않습니다.
그런 다음 매뉴얼로 이동하여 인터페이스 데이터 반환을 확인합니다. 체재.
특정: 공식 문서 - 내장 모듈 - 데이터 테이블 - 반환된 데이터
7 그 중 성공 시 반환되는 코드는 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 프레임워크 페이징 설정에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!