分页 (Pager)

数据分页导航组件。

概述

分页组件自适应PC和移动端

代码演示

1.默认示例

namespace WebSite.Docus.Nav.Pagers;

class Pager1 : BaseComponent
{
    private PagingCriteria criteria = new(1);

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<Pager>()
               .Set(c => c.TotalCount, 120)
               .Set(c => c.PageIndex, criteria.PageIndex)
               .Set(c => c.PageSize, criteria.PageSize)
               .Set(c => c.OnPageChanged, OnPageChanged)
               .Build();
    }

    private Task OnPageChanged(PagingCriteria criteria)
    {
        this.criteria = criteria;
        return Task.CompletedTask;
    }
}

2.更新总条数示例

条数：

namespace WebSite.Docus.Nav.Pagers;

class Pager2 : BaseComponent
{
    private Number? total;
    private PagingCriteria criteria = new(1);
    private int totalCount = 120;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Div("control", attr =>
        {
            builder.Label("form-label", "条数：");
            builder.Field<Number>("Total").Value("200").Set(f => f.Width, 100).Build(value => total = value);
            builder.Button("设置", Callback(OnSetTotal), StyleType.Primary);
        });

        builder.Component<Pager>()
               .Set(c => c.TotalCount, totalCount)
               .Set(c => c.PageIndex, criteria.PageIndex)
               .Set(c => c.PageSize, criteria.PageSize)
               .Set(c => c.OnPageChanged, OnPageChanged)
               .Build();
    }

    private void OnSetTotal() => totalCount = total.ValueAs<int>();

    private Task OnPageChanged(PagingCriteria criteria)
    {
        this.criteria = criteria;
        return Task.CompletedTask;
    }
}