Layui 테이블에서 Pagination을 구현하려면 어떻게해야합니까?

Layui 테이블에서 Pagination 구현

Layui의 테이블 구성 요소는 내장 페이지 화 기능을 제공하여 사용자 친화적 인 방식으로 대규모 데이터 세트를 표시하는 프로세스를 단순화합니다. 키는 table.render() 메소드 내에서 page 옵션을 사용하는 데 있습니다. 이 옵션은 다양한 페이지 매김 설정이 포함 된 객체를 허용합니다. 다음은 고장입니다.

먼저 HTML에 Layui JavaScript 및 CSS 파일을 포함해야합니다. 그런 다음 table.render() 사용하여 테이블을 초기화합니다. 결정적으로 옵션 내에 page 객체를 포함시킵니다. 이 개체는 페이지 매김에 대한 세밀한 제어를 허용합니다. 예를 들어:

 <code class="javascript">layui.use('table', function(){ var table = layui.table; table.render({ elem: '#myTable' // Specify the table element ,url: '/data.json' // URL to fetch data (can be server-side) ,cols: [[ // Table columns definition {field:'id', title:'ID', width:80, sort: true} ,{field:'username', title:'Username', width:120} ,{field:'email', title:'Email', width:200} ,{field:'joinTime', title:'Join Time', width:180} ]] ,page: { // Pagination options layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] // Customize pagination layout ,limit: 10 // Number of items per page ,limits: [10, 20, 30, 40, 50] // Available page size options } ,id: 'myTableId' // Assign an ID to the table instance for future manipulation }); });</code>

이 예에서 url 데이터 소스 (로컬 JSON 파일 또는 서버 측 엔드 포인트 일 수 있음)를 가리 킵니다. page 객체는 페이지 당 10 개 항목의 한계를 지정하고 페이지 당 10, 20, 30, 40 또는 50 개 항목의 사용자 선택을 제공합니다. layout 옵션을 사용하면 Pagination 컨트롤을 사용자 정의 할 수 있습니다. /data.json 실제 데이터 소스로 바꾸는 것을 잊지 마십시오. id 속성은 나중에 테이블의 조작에 필수적입니다.

Layui 테이블을 페이지를 입을 때 피할 수있는 일반적인 함정

몇 가지 일반적인 실수는 Layui의 테이블 페이지 매김의 효과적인 사용을 방해 할 수 있습니다.

• 잘못된 데이터 처리 : 서버 측 스크립트에서 반환 된 데이터를 올바르게 처리하지 못하는 것은 주요 함정입니다. 서버가 Layui 기대 (일반적으로 JSON) 형식으로 데이터를 반환하는지 확인하십시오. JSON은 현재 페이지의 데이터와 총 레코드 수를 모두 포함해야합니다. Layui는이 총 숫자를 사용하여 Pagination 컨트롤을 정확하게 렌더링합니다.
• page 객체 매개 변수 무시 : table.render() 내에서 page 개체를 구성하는 것을 무시하면 페이지 매김이 발생하지 않습니다. curr , limit 및 limits 와 같은 매개 변수에 각각 세심한주의를 기울여 현재 페이지 당 항목 및 사용 가능한 옵션을 각각 제어하십시오.
• 일관되지 않은 데이터 업데이트 : 테이블 데이터를 업데이트 할 때 (예 : 검색 또는 필터 후) 업데이트 된 데이터 및 페이지 매김 설정으로 테이블을 다시 렌더링해야합니다. 단순히 데이터를 수정하면 페이지 매김이 자동으로 업데이트되지 않습니다. 이 목적으로 table.reload() 메소드를 사용하십시오.
• 대규모 데이터 세트가있는 프론트 엔드 전반 페이지 화 : 매우 큰 데이터 세트를 가진 클라이언트 측에서만 페이지 화를 구현하는 것은 비효율적이며 성능에 부정적인 영향을 미칩니다. 서버 측면 페이지는 상당한 양의 데이터를 처리하는 데 중요합니다.

Pagination Control의 모양을 사용자 정의합니다

Layui는 Pagination Control의 모양을 사용자 정의하는 데 약간의 유연성을 제공합니다. page 객체 내에서 직접 광범위한 CSS 사용자 정의 옵션을 제공하지는 않지만 CSS 재정을 통해 중대한 시각적 변경을 달성 할 수 있습니다. 여기에는 Layui의 Pagination 구성 요소가 사용하는 특정 CSS 클래스를 타겟팅하는 것이 포함됩니다. 브라우저의 개발자 도구를 사용하여 Pagination 컨트롤의 렌더링 된 HTML을 검사하면 관련 클래스가 표시됩니다.

예를 들어, 사용자 정의 CSS 규칙을 추가하여 페이지 매김 요소의 색상, 글꼴 크기 또는 간격을 수정할 수 있습니다.

 <code class="css">.layui-table-page .layui-laypage-prev, .layui-table-page .layui-laypage-next { background-color: #007bff; /* Example: Change button background color */ color: white; } .layui-table-page .layui-laypage-curr { background-color: #28a745; /* Example: Change current page indicator color */ }</code>

Layui의 CSS 클래스는 버전에서 변경 될 수 있으므로 항상 최신 클래스 이름에 대한 공식 Layui 문서를 참조하십시오. 브라우저의 개발자 도구를 사용하여 특정 LAYUI 버전의 페이지 매김 요소에 적용되는 현재 클래스를 식별하십시오.

서버 측 페이지를 내 Layui 테이블과 통합합니다

서버 측면 페이지는 성능, 특히 대형 데이터 세트에서 필수적입니다. 서버에서 현재 페이지에 필요한 데이터 만 요청하는 것이 포함됩니다. 서버 측 스크립트 (예 : PHP, Node.js, Python 등)는 Pagination Logic을 처리해야합니다. 페이지 번호 ( page 또는 curr ) 및 페이지 당 항목 ( limit )을 나타내는 매개 변수를 수락하고 다음을 포함하는 JSON 응답을 반환해야합니다.

• data : 현재 페이지의 데이터 배열.
• count : 총 레코드 수.

Layui table.render() 호출은이 서버 측 스크립트를 가리키고 Layui의 Pagination 구성 요소는 count 값을 사용하여 Pagination 컨트롤을 올바르게 렌더링합니다.

예를 들어 서버 측 스크립트가 /api/data 에 있으면 Layui 코드가 다음과 같습니다.

 <code class="javascript">layui.use('table', function(){ var table = layui.table; table.render({ elem: '#myTable' ,url: '/api/data' // ... other table options ... ,page: true // Enable pagination }); });</code>

서버 측 스크립트는 page 수신하고 매개 변수를 limit 하고 적절한 데이터와 총 카운트를 반환합니다. 이를 통해 필요한 데이터 만 가져 와서 처리되어 성능과 확장 성이 크게 향상됩니다. 특정 서버 측 기술 및 API와 일치하도록 URL 및 데이터 처리를 조정해야합니다.

위 내용은 Layui 테이블에서 Pagination을 구현하려면 어떻게해야합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!