Blazor Grid 페이지 번호 개요

    The Ignite UI for Blazor Pagination feature in Blazor Grid is used to split a large set of data into a sequence of pages that have similar content. React grid pagination improves user experience and data interaction. IgbGrid pagination is configurable via a separate component projected in the grid tree by defining a IgbPaginator tag, similar to adding of a column. As in any Blazor table, the pagination in the Blazor Grid supports template for custom pages.

    Blazor Grid Pagination Example

    다음 예시는 페이지네이션을 나타내IgbGrid 며, 페이지당 항목의 사용법과 페이지 전환 가능 옵션을 설명합니다. 사용자는 "마지막 페이지로 이동"과 "첫 페이지로 이동" 버튼을 통해 페이지를 빠르게 탐색IgbGrid 할 수도 있습니다.

    .gridSize {
    --ig-size: var(--ig-size-small);
}

    <IgbGrid @ref=grid Class="gridSize" Width="100%" Height="500px" Data=Data>
    <IgbPaginator PerPage="10"></IgbPaginator>
</IgbGrid>

    Paging with Group By

    그룹 행은 데이터 행과 함께 페이징 프로세스에 참여합니다. 각 페이지의 페이지 크기에 포함됩니다. 축소된 행은 페이징 프로세스에 포함되지 않습니다.

    페이징과 그룹화 기준 간의 통합은 그룹화 기준 항목에 설명되어 있습니다.

    Usage

    ​IgbPaginator이 컴포넌트는 아래 예시의 컴포넌트와IgbGrid 함께 사용되지만, 페이징 기능이 필요할 경우 다른 컴포넌트와도 함께 사용할 수 있습니다.

    <IgbGrid @ref=grid Data=Data className="gridSize">
    <IgbPaginator Page="grid.Page" TotalRecords="grid.TotalRecords" PerPage="10">
    </IgbPaginator>
</IgbGrid>

    Paginator Component Demo

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.