javascript - Blazor:在 Datatable.Js 上使用 Entiy 框架应用分页
问题描述
我有一个使用实体框架并使用 JavaScript InterOp 绑定到 DataTable.js 的 Blazor 项目。
该项目运行良好,但如果从我的表加载的记录很大,我会遇到延迟并且我的应用程序有时会崩溃。
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-bordered"
id="example"
width="100%"
cellspacing="0">
<thead>
<tr style="font-size:14px">
<th>FEEDER ID</th>
<th>FEEDER NAME</th>
<th>FEEDER TYPE</th>
<th>DISTRICT ID</th>
<th>TCN 132Kv ID</th>
<th>INJECTION ID </th>
<th>FEEDER NO</th>
<th>FEEDER LENGTH </th>
<th>STATUS</th>
<th>FEEDER CODE</th>
<th>DOWNLOAD MAP</th>
</tr>
</thead>
<tbody>
@foreach (var data in feederview)
{
<tr style="font-size:14px">
<td>@data.FeederId</td>
<td>@data.FeederName</td>
<td>@data.FeederType</td>
<td>@data.DistrictId</td>
<td>@data.Tcn132kv33kvId</td>
<td>@data.InjectionssId</td>
<td>@data.FeederNo</td>
<td>@data.FeederLength</td>
<td>@data.Status</td>
<td>@data.FeederCode</td>
<td align="center">
<button class="btn-info btn-sm" id="btnDelete" value="delete"><i class="fa fa-eye fa-1x " aria-hidden="true"></i></button>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
以上是我的带有绑定的 HTML 代码定义
使用实体框架的 C# Blazor 服务器端代码
feederview = context.FeederView.Select(c => new FeederView()
{
FeederId = c.FeederId,
FeederName = c.FeederName,
FeederType = c.FeederType,
DistrictId = c.DistrictId,
Tcn132kv33kvId = c.Tcn132kv33kvId,
Tcn132kv33kvTransformerId = c.Tcn132kv33kvTransformerId,
InjectionssId = c.InjectionssId,
InjectionssTransformerId = c.InjectionssTransformerId,
FeederNo = c.FeederNo,
FeederLength = c.FeederLength,
Status = c.Status,
FeederCode = c.FeederCode,
}).ToList();
该列表最多返回 2000 条记录,这使我的应用程序变慢并崩溃。
以上是显示的示例记录(为此我只加载了小记录)
如何将分页添加到 Datatable.js 以允许我在加载时检索特定数量的记录,然后再检索剩余的加载?
解决方案
我认为您需要查看服务器端处理https://datatables.net/manual/data/
否则,也许有一种方法可以利用新的虚拟化功能。
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/virtualization?view=aspnetcore-5.0
推荐阅读
- windows-10 - Microsoft Graph 中的时间线活动
- winforms - 从 winform 运行 cmd
- device - Xcode 12 和 Algolia 搜索客户端?
- python - 使用 Dask 分布式调度程序
- javascript - 将 TimeZone 时间字符串正确转换为本地时间
- flutter - Geolocator 不会在 iOS Flutter 上请求许可
- java - 有没有办法将联系人导入网络应用程序?
- google-cloud-platform - 是否可以在免费层中使用 Google Cloud Kubernetes 集群?
- javascript - javascript中的纯函数
- c# - 使用 TextRenderer C# 渲染抗锯齿文本