Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Blazor Grid/Table Pagination

표 형식의 표 UI는 많은 웹 제품에서 일반적으로 사용됩니다. 처음부터 표 형식의 표 UI를 만드는 것은 쉽지 않지만, Ignite UI for Blazor 그리드를 사용하면 표 UI를 만드는 것이 간단하고, 대량의 로컬 또는 원격 데이터를 Blazor 그리드에 바인딩하는 것도 쉽습니다. 그리드는 기본적으로 가상화되므로 대용량 데이터 세트를 표시하기 위해 표 페이지 매김을 포함할 필요가 없습니다. 주로 UI에서 복잡한 데이터를 구성하는 가장 효율적인 방법으로 사용됩니다. 표 페이지 매김을 사용하면 데이터를 설정된 수의 행에 표시하여 사용자가 스크롤 막대가 실제로 필요하지 않고도 데이터를 "스크롤"할 수 있습니다. 표 페이지 매김을 위한 UI에는 일반적으로 현재 페이지, 전체 페이지, 사용자가 페이지를 넘길 수 있도록 하는 클릭 가능한 이전 및 다음 화살표/버튼과 같은 항목이 포함됩니다(다음에서 보여줌).

행 페이징은 IsPagerVisible 속성을 설정하여 Ignite UI for Blazor 내에서 활성화됩니다. 또한 PageSize 설정하여 표시되는 행의 최대 수를 제한할 수 있습니다.

すぐに使用できる機能のフルセット は、ページング、ソート、フィルタリング、編集、グループ化から行と列の仮想化まで、あらゆる機能をカバーします。.NET 開発者には制限はありません。

無料で試してみる

Blazor Row Paging Example

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbDataGridModule),
                typeof(IgbGridColumnOptionsModule)
);
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">

        @if (Data != null)
        {
            <div class="container center" style="overflow: hidden">
                <IgbDataGrid Height="100%" Width="100%"
                        DataSource="Data"
                        AutoGenerateColumns="false"
                        IsPagerVisible="true"
                        PageSize="20">
                    <IgbTextColumn Field="ProductID" Width="@("*>110")" HeaderText="ID" HorizontalAlignment="CellContentHorizontalAlignment.Center" />
                    <IgbTextColumn Field="ProductName" HeaderText="Product" Width="@("*>120")" />
                    <IgbImageColumn IsEditable="false" Field="CountryFlag" HeaderText="Country" Width="@("*>130")"/>
                    <IgbNumericColumn Field="ProductPrice" HeaderText="Price" Width="@("*>110")" PositivePrefix="$" ShowGroupingSeparator="true" MaxFractionDigits="0" MinFractionDigits="0" />
                    <IgbNumericColumn Field="OrderItems" HeaderText="Orders" Width="@("*>140")" PositivePrefix="" ShowGroupingSeparator="true" MaxFractionDigits="0" MinFractionDigits="0" />
                    <IgbNumericColumn Field="OrderValue" HeaderText="Order Value" Width="@("*>160")" PositivePrefix="$" ShowGroupingSeparator="true" MaxFractionDigits="0" MinFractionDigits="0" />
                    <IgbDateTimeColumn Field="OrderDate" HeaderText="Order Date" Width="@("*>150")" DateTimeFormat="DateTimeFormats.DateShort" />
                    <IgbNumericColumn Field="Margin" Width="@("*>140")" PositivePrefix="$"/>
                    <IgbNumericColumn Field="Profit" Width="@("*>140")" PositivePrefix="$" ShowGroupingSeparator="true" MaxFractionDigits="0" MinFractionDigits="0" />
                    <IgbTextColumn Field="Status" Width="@("*>140")" />
                </IgbDataGrid>
            </div>
        }

</div>

@code {

    private List<SaleInfo> Data;
    private Random Rand = new Random();

    protected override void OnInitialized()
    {

        GenerateData();
    }

    public void GenerateData()
    {
        string[] names = new string[] {
            "Intel CPU", "AMD CPU",
            "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard",
            "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU",
            "Corsair Memory", "Patriot Memory", "Skill Memory",
            "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD",
            "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD",
            "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" };

        string[] countries = new string[] {
            "USA", "UK", "France", "Canada", "Poland",
            "Denmark", "Croatia", "Australia", "Seychelles",
            "Sweden", "Germany", "Japan", "Ireland",
            "Barbados", "Jamaica", "Cuba", "Spain", };
        string[] status = new string[] { "Packing", "Shipped", "Delivered" };

        var sales = new List<SaleInfo>();

        for (var i = 0; i < 200; i++)
        {
            var price = GetRandomNumber(10000, 90000) / 100;
            var items = GetRandomNumber(4, 30);
            var value = Math.Round(price * items);
            var margin = GetRandomNumber(2, 5);
            var profit = Math.Round((price * margin / 100) * items);
            var country = GetRandomItem(countries);

            var item = new SaleInfo()
            {
                Country = country,
                CountryFlag = GetCountryFlag(country),
                Margin = margin,
                OrderDate = GetRandomDate(),
                OrderItems = items,
                OrderValue = value,
                ProductID = 1001 + i,
                ProductName = GetRandomItem(names),
                ProductPrice = price,
                Profit = Math.Round(profit),
                Status = GetRandomItem(status)
            };
            sales.Add(item);
        }

        this.Data = sales;
    }

    public double GetRandomNumber(double min, double max)
    {
        return Math.Round(min + (Rand.NextDouble() * (max - min)));
    }

    public string GetRandomItem(string[] array)
    {
        var index = (int)Math.Round(GetRandomNumber(0, array.Length - 1));
        return array[index];
    }

    public DateTime GetRandomDate() {
        var today = new DateTime();
        var year = today.Year;
        var month = this.GetRandomNumber(1, 9);
        var day = this.GetRandomNumber(10, 27);
        return new DateTime(year, (int)month, (int)day);
    }

    public string GetCountryFlag(string country)
    {
        var flag = "https://static.infragistics.com/xplatform/images/flags/" + country + ".png";
        return flag;
    }

    public class SaleInfo
    {
        public string Status { get; set; }
        public string ProductName { get; set; }
        public string CountryFlag { get; set; }
        public string Country { get; set; }
        public DateTime OrderDate { get; set; }
        public double Profit { get; set; }
        public double ProductPrice { get; set; }
        public double ProductID { get; set; }
        public double OrderValue { get; set; }
        public double OrderItems { get; set; }
        public double Margin { get; set; }
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

개요

UX 관점에서 볼 때 테이블 페이지 매김에는 장단점이 있습니다. UX Matters의 최근 기사에 따르면 다음은 테이블 페이지 매김과 관련하여 좋은 점과 나쁜 점을 분석한 것입니다.

테이블 페이지 매김의 이점:

• 사용자 선택을 제한합니다.
• 클릭수는 측정 가능합니다

테이블 페이지 매김 단점:

• 사용자는 여전히 스크롤해야 합니다.
• 호출기는 사이트마다 다르게 작동하고 동작합니다.
• UI 컨트롤이 너무 많으면 혼란스러울 수 있습니다.
• 사용자는 페이징과 느리고 번거로운 작업을 인식합니다.
• 사용자는 페이지 매김 컨트롤을 눈치채지 못할 수 있습니다.
• 페이지 로딩이 느릴 수 있습니다
• 사용자는 작업이 페이지에 적용되는지 아니면 전체 데이터 세트에 적용되는지 혼란스러워합니다.

Ignite UI Blazor 그리드를 사용하면 개발자가 페이징을 추가할 수 있지만 그리드에는 기본적으로 무한 스크롤이 내장되어 있으므로 그리드에 페이저를 추가하는 것보다 무한(또는 가상) 스크롤을 권장합니다. 가상화된 무한 스크롤을 기본 사용자 경험으로 사용하면 다음을 얻을 수 있습니다.

• 스크롤 상호작용을 통해 얼마나 많은 데이터가 '페이징'되는지 또는 제어할 수 있는 상태에서 최고의 성능을 발휘합니다.
• 모든 콘텐츠를 스크롤하는 자연스러운 접근 방식
• 모든 상호 작용은 최종 사용자에게 명확하게 전달됩니다.
• 모바일 UX의 자연스러운 상호작용에 매핑

Blazor Grid/Page Synchronization

사용자가 정렬, 그룹화와 같이 그리드와 상호 작용하는 경우 그리드에서 Blazor Pager를 활성화한 경우 다음 함수를 사용하여 Blazor 페이지 번호 데이터가 Blazor 테이블 표시와 동기화되도록 해야 합니다.

• 적용정렬
• 적용그룹
• 적용필터

API References

• IgbGrid
• IsPagerVisible
• PageSize