Blazor Server 客户端分页类

当数据小于1000条时,一般都把数据都传到客户端去处理,然后分页显示。如果不使用其他的付费或免费的东东,只能自己编写分页类。下面是适用于Blazor Server 客户端分页类,客户端不需要异步执行。

    public class PaginatedList<T> : List<T>
    {
        public int PageIndex { get; private set; } = 1;
        public int TotalPages { get; private set; } = 1;
        public bool HasData { get; private set; } = true;

        public PaginatedList(List<T> items, int count, int pageIndex, int pageSize)
        {
            if (count == 0)
            {
                HasData = false;
            }
            else
            {
                PageIndex = pageIndex;
                TotalPages = (int)Math.Ceiling(count / (double)pageSize);

                AddRange(items);
            }
        }

        public bool NoPreviousPage => PageIndex == 1;
        public bool NoNextPage => PageIndex == TotalPages;

        public static PaginatedList<T> Create(IQueryable<T> source, int pageIndex, int pageSize)
        {
            var count = source.Count();
            if (count == 0)
            {
                return new PaginatedList<T>(new List<T>(), count, pageIndex, pageSize);
            }
            var items = source.Skip(
                (pageIndex - 1) * pageSize)
                .Take(pageSize).ToList();
            return new PaginatedList<T>(items, count, pageIndex, pageSize);
        }
    }

 下面是组件运用示例代码:

@inject IDataService DataService
<div class="row justify-content-between">
    <h6 style="color:blue; width:120px;">学生列表</h6>
    <button @onclick="addStudent" class="btn btn-primary btn-sm" style="width:100px;height:30px;">添加学生</button>
    <div style="width:300px;">
        <p>
            <label class="control-label">
                姓名查询:
                <input @onchange="SearchNameChanged"  type="text" class="form-control-sm" />
            </label>
        </p>
    </div>
</div>
<table class="table table-bordered table-hover table-sm table-striped" >
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>年级</th>
            <th>班级</th>
            <th>住址</th>
        </tr>
    </thead>
    <tbody >
        @if (data.HasData)
        {
            foreach (var item in data)
            {
                <tr @onclick="@(()=>OnRowClick(item))">
                    <td>@item.Name</td>
                    <td>@item.Gender</td>
                    <td>@item.Age</td>
                    <td>@item.Grade</td>
                    <td>@item.Class</td>
                    <td>@item.Adress</td>
               </tr>
            }
        }
        else
        {
            <tr>
                <td colspan="6" class="text-center">暂无数据</td>
            </tr>
        }
    </tbody>
    <tfoot>
        <button @onclick="PreviousPage" class="btn btn-primary btn-sm" disabled="@data.NoPreviousPage">上一页</button>
        <button @onclick="NextPage" class="btn btn-primary btn-sm" disabled="@data.NoNextPage">下一页</button>
    </tfoot>
</table>
@code {
    [NotNull]
    private PaginatedList<Student>? data { get; set; }
    [NotNull]
    private IEnumerable<Student>? dataSource { get; set; }
    [NotNull]
    private IQueryable<Student>? query { get; set; }
    private string _searchString { get; set; } = "";

    private int pageSize = 20, pageIndex = 1;

    private void OnRowClick(Student item)
    {
        Edit(item);//进入编辑页面略
    }
    protected override async Task OnInitializedAsync()
    {
        dataSource = await DataService.GetStudentsAsync();
        query = dataSource.AsQueryable().OrderBy(o => o.Grade).ThenBy(o => o.Class);
        data = PaginatedList<Student>.Create(query,pageIndex,pageSize);
    }

    private void SearchNameChanged(ChangeEventArgs e)
    {
        if (e.Value is not null)
        {
            _searchString = (string)e.Value;
        }
        onChanged();
    }
    private void PreviousPage()
    {
        pageIndex--;
        data = PaginatedList<Student>.Create(query, pageIndex, pageSize);
    }
    private void NextPage()
    {
        pageIndex++;
        data = PaginatedList<Student>.Create(query, pageIndex, pageSize);
    }
    private void GotoPage(int pageNum)
    {
        data = PaginatedList<Student>.Create(query,pageNum, pageSize);
    }
    private void onChanged()
    {
        query = dataSource.AsQueryable()
             .Where(x => string.IsNullOrWhiteSpace(_searchString) || x.Name.Contains(_searchString, StringComparison.OrdinalIgnoreCase))
        data = PaginatedList<Student>.Create(query, pageIndex, pageSize);
    }
    private void addStudent()
    {
        //进入添加页面略
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

落单枫叶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值