데이터 테이블 페이지 매김 사용

페이징 기술을 사용하면 많은 양의 데이터를 작은 덩어리로 표시할 수 있습니다. 예를 들어 Amazon 및 Flipkart와 같은 온라인 상점에는 수백만 개의 제품이 나열되어 있습니다. 따라서 데이터를 표시하기 위해 페이지 매김 기술을 사용하지 않는 경우 사용자는 마지막 제품을 보려면 웹 페이지 끝으로 스크롤해야 합니다. 이제 수백만 개의 제품 중 마지막 제품에 도달하는 데 얼마나 많은 스크롤이 필요한지 생각해 보세요.

페이지 매김 기술에서는 특정 양의 데이터를 단일 페이지에 표시합니다. 예를 들어, 각 페이지의 길이를 100으로 설정하면 사용자는 첫 번째 페이지에서 처음 100개의 제품을 볼 수 있고, 두 번째 페이지에서는 또 다른 100개의 제품을 볼 수 있습니다.

jQuery에서 Datatables 플러그인은 HTML 테이블 데이터 형식을 지정하는 데 사용됩니다. 또한 테이블에 페이지 매김 기능을 추가할 수 있습니다.

Syntax

의 중국어 번역은

Grammar

입니다.

사용자는 Datatables API를 사용하여 다음 구문을 사용하여 테이블에 페이지 매김을 추가할 수 있습니다.

으아아아

위 구문에서 사용자는 "true" 또는 "false" 부울 값을 사용하여 페이지 매김을 표시하거나 숨길 수 있습니다. pageLength 속성은 단일 페이지에 표시되는 총 항목 수를 지정합니다.

예제 1

의 중국어 번역은 다음과 같습니다.

예제 1

아래 예시에서는 카드 데이터 테이블을 생성합니다. 또한 'car' 값과 함께 'id'를 추가했습니다.

jQuery에서는 해당 ID를 사용하여 테이블에 액세스하고 DataTable() 함수를 실행합니다. 또한 이 객체를 datatable() 메서드에 인수로 전달합니다. 이 개체에는 페이징 설정을 위한 "paging: true" 및 "pageLength: 3"이 포함되어 있으며 페이지당 3개의 항목을 표시합니다.

으아아아

예 2

아래 예시에서는 음식 관련 데이터를 저장하기 위한 테이블을 생성했습니다. 여기서는 음식 이름, 칼로리, 지방, 탄수화물 등과 같은 음식 정보를 포함하는 객체 배열을 만듭니다.

그런 다음 배열을 반복하고 배열의 각 객체에 대한 테이블 행을 생성한 다음 테이블 본문에 추가합니다. 또한 음식 테이블에 대한 매개변수를 전달하지 않고 dataTables() 메서드를 실행했습니다.

출력에서 사용자는 기본적으로 페이지당 10개의 값이 표시되는 것을 확인할 수 있습니다. 단, 사용자가 50, 100으로 변경할 수 있습니다.

으아아아

우리는 jQuery의 DataTable 플러그인을 사용하여 테이블에 페이지 매김 기능을 추가하는 방법을 배웠습니다. 또한 사용자 정의 페이지 길이를 설정하는 방법도 배웠습니다. 또한 페이지 길이를 수신하고 사용자 기본 설정에 따라 페이지 길이를 설정할 수 있는 사용자 정의 입력 필드를 만들 수 있습니다.

위 내용은 데이터 테이블 페이지 매김 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!