Blazor：在 Datatable.Js 上使用实体框架应用分页

Question

我有一个使用实体框架并使用 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 以允许我在加载时检索特定数量的记录并在以后检索剩余的记录？

Answer 1

我认为您需要查看服务器端处理https://datatables.net/manual/data/

否则，也许有办法利用新的虚拟化功能。

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/virtualization?view=aspnetcore-5.0