当数据小于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()
{
//进入添加页面略
}
}