구체적인 단계는 다음과 같습니다.
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 ></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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
무한 스크롤링에 Layui의 흐름 모듈을 어떻게 사용합니까?Mar 18, 2025 pm 01:01 PM이 기사는 무한 스크롤, 커버 설정, 모범 사례, 성능 최적화 및 향상된 사용자 경험을위한 사용자 정의에 Layui의 Flow Module을 사용하는 것에 대해 설명합니다.
Layui의 요소 모듈을 사용하여 탭, 아코디언 및 진행 막대를 만드는 방법은 무엇입니까?Mar 18, 2025 pm 01:00 PM이 기사는 Layui의 요소 모듈을 사용하여 탭, 아코디언 및 진행 막대와 같은 UI 요소를 작성하고 사용자 정의하는 방법에 대해 자세히 설명합니다.
Layui의 회전식 모듈의 모양과 동작을 어떻게 사용자 정의합니까?Mar 18, 2025 pm 12:59 PM이 기사에서는 전환 효과, 자동 재생 설정 및 사용자 정의 탐색 컨트롤 추가를 포함하여 외관 및 동작을위한 CSS 및 JavaScript 수정에 중점을 둔 Layui의 회전 목마 모듈 사용자 정의에 대해 설명합니다.
Layui의 회전 목마 모듈을 사용하여 이미지 슬라이더를 만드는 방법은 무엇입니까?Mar 18, 2025 pm 12:58 PM이 기사는 이미지 슬라이더 용 Layui의 회전 목마 모듈 사용, 설정 단계, 사용자 정의 옵션, 자동 재생 및 내비게이션 구현 및 성능 최적화 전략을 사용하는 방법을 안내합니다.
파일 유형 및 크기를 제한하도록 Layui의 업로드 모듈을 어떻게 구성합니까?Mar 18, 2025 pm 12:57 PM이 기사에서는 Layui의 업로드 모듈 구성에 대해 논의하고, 승인, Exts 및 크기 속성을 사용하여 파일 유형 및 크기를 제한하고 위반에 대한 오류 메시지를 사용자 정의합니다.
Layui의 레이어 모듈을 사용하여 모달 창과 대화 상자를 만드는 방법은 무엇입니까?Mar 18, 2025 pm 12:46 PM이 기사는 Layui의 레이어 모듈을 사용하여 모달 창과 대화 상자를 만들고 설정, 유형, 사용자 정의 및 피하는 일반적인 함정을 자세히 설명하는 방법을 설명합니다.
Layui는 Bootstrap 및 Semantic UI와 같은 다른 CSS 프레임 워크와 어떻게 비교됩니까?Mar 14, 2025 pm 07:29 PM단순성과 성능으로 알려진 Layui는 설계, 구성 요소 및 통합 편의성에 대한 부트 스트랩 및 시맨틱 UI와 비교됩니다. Layui는 모듈성 및 중국 지원에 뛰어납니다. (159 자)
일반적인 웹 응용 프로그램 이외의 Layui의 일부 고급 사용 사례는 무엇입니까?Mar 14, 2025 pm 07:28 PMLayui는 기본 웹 앱을 넘어 스파, 실시간 대시 보드, PWA 및 복잡한 데이터 시각화로 확장되어 모듈 식 설계 및 풍부한 UI 구성 요소를 사용하여 엔터프라이즈 수준의 사용자 경험을 향상시킵니다 (159 자)
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
WebStorm Mac 버전
유용한 JavaScript 개발 도구
맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
