Layui를 사용하여 페이징 기능이 있는 데이터 표시 페이지를 개발하는 방법

Layui를 사용하여 페이징 기능이 있는 데이터 표시 페이지를 개발하는 방법

Layui는 간단하고 아름다운 인터페이스 구성 요소와 풍부한 대화형 경험을 제공하는 경량 프런트 엔드 UI 프레임워크입니다. 개발 중에 우리는 많은 양의 데이터를 표시하고 페이징을 수행해야 하는 상황에 자주 직면합니다. 다음은 Layui를 이용하여 개발한 페이징 기능이 포함된 데이터 표시 페이지의 예입니다.

먼저 Layui의 관련 파일과 종속성을 소개해야 합니다. HTML 페이지의 태그에 다음 코드를 추가합니다. 标签中加入以下代码：

<link rel="stylesheet" href="path/to/layui/css/layui.css">
<script src="path/to/layui/layui.js"></script>

接下来，我们需要创建一个包含数据和分页的容器。例如，我们可以使用一个 <tbody> 元素来显示数据，并在页面底部添加一个 <code><div> 来展示分页相关内容。<pre class='brush:html;toolbar:false;'>&lt;table class=&quot;layui-table&quot;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;ID&lt;/th&gt; &lt;th&gt;姓名&lt;/th&gt; &lt;th&gt;性别&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody id=&quot;dataContainer&quot;&gt;&lt;/tbody&gt; &lt;/table&gt; &lt;div id=&quot;pageContainer&quot; class=&quot;layui-laypage&quot;&gt;&lt;/div&gt;</pre><p>现在，我们可以使用JavaScript来动态加载数据并进行分页。首先，我们需要初始化Layui的一些组件。</p><pre class='brush:javascript;toolbar:false;'>layui.use(['table', 'laypage'], function(){ var table = layui.table; var laypage = layui.laypage; // 数据接口 var dataUrl = 'path/to/your/data'; // 渲染表格 table.render({ elem: '#dataContainer', url: dataUrl, page: false, // 首次不显示分页 cols: [[ // 表头 {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'gender', title: '性别'} ]] }); // 获取数据总数 $.get(dataUrl, function(res){ var total = res.data.length; // 渲染分页 laypage.render({ elem: 'pageContainer', count: total, limit: 10, // 每页显示的数量 layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], // 显示方式 jump: function(obj, first){ if(!first){ // 点击分页时重新加载数据 table.reload('dataContainer', { page: { curr: obj.curr // 当前页码 } }); } } }); }); });</pre><p>以上代码使用了Layui的 <code>table 和 laypage 组件。首先通过 table.render 方法渲染数据表格，其中的 url 参数指定数据接口的地址，cols 参数定义了表头的字段和标题。然后使用 $.get 方法获取数据总数，并通过 laypage.render 方法渲染分页组件。

在点击分页时，会触发 jump 回调函数，并重新加载数据。通过 table.reloadrrreee

다음으로 데이터와 페이지 매김이 포함된 컨테이너를 만들어야 합니다. 예를 들어, <tbody> 요소를 사용하여 데이터를 표시하고, 페이지 하단에 <code><div>를 추가하여 페이지 매기기 관련 콘텐츠를 표시할 수 있습니다. <p>rrreee</p> 이제 JavaScript를 사용하여 데이터를 동적으로 로드하고 페이지를 매길 수 있습니다. 먼저 Layui의 일부 구성 요소를 초기화해야 합니다. <p>rrreee</p>위 코드는 레이이의 <code>table과 laypage 컴포넌트를 사용하고 있습니다. 먼저, 데이터 테이블은 url 매개변수가 데이터 인터페이스의 주소를 지정하는 table.render 메소드를 통해 렌더링되고 cols 매개변수는 헤더 필드와 제목을 정의합니다. 그런 다음 $.get 메서드를 사용하여 총 데이터 수를 가져오고 laypage.render 메서드를 통해 페이징 구성 요소를 렌더링합니다. 🎜🎜페이지 매김을 클릭하면 jump 콜백 함수가 실행되고 데이터가 다시 로드됩니다. table.reload 메소드를 통해 현재 페이지 번호를 전달하여 해당 데이터를 로드할 수 있습니다. 🎜🎜위 예시의 데이터 인터페이스는 Layui의 요구 사항을 충족하는 데이터 형식을 반환해야 한다는 점에 유의하세요. 자세한 내용은 Layui 문서를 참조하세요. 🎜🎜위 단계를 통해 Layui를 사용하여 페이징 기능이 있는 데이터 표시 페이지를 개발할 수 있습니다. 전체 프로세스가 간단하고 이해하기 쉬우므로 사용자는 대량의 데이터를 빠르게 탐색하고 관리할 수 있습니다. 🎜