C# Datatables.net Razor页需要很长时间才能加载较大的数据集_C#_Datatables_Razor Pages_.net 5

C# Datatables.net Razor页需要很长时间才能加载较大的数据集

c# datatables

C# Datatables.net Razor页需要很长时间才能加载较大的数据集,c#,datatables,razor-pages,.net-5,C#,Datatables,Razor Pages,.net 5,我有一个功能齐全的页面，但是，我想使用datatables.net设置来实现搜索和排序功能……一旦你破解了几百条记录，加载就需要相当长的时间。10000条记录需要3分钟以上的时间才能加载页面并使其完全正常工作。有没有办法加快速度？我需要分页，但它附带的搜索框只搜索该页面/记录集中的记录。有没有办法让它加载得更快（即：让它在排序之前不渲染每条记录），或者我需要使用不同的方法页面如下： @page @model NBG_Central.Pages.DataCentral.ManageItemsMo

我有一个功能齐全的页面，但是，我想使用datatables.net设置来实现搜索和排序功能……一旦你破解了几百条记录，加载就需要相当长的时间。10000条记录需要3分钟以上的时间才能加载页面并使其完全正常工作。有没有办法加快速度？我需要分页，但它附带的搜索框只搜索该页面/记录集中的记录。有没有办法让它加载得更快（即：让它在排序之前不渲染每条记录），或者我需要使用不同的方法

页面如下：

@page
@model NBG_Central.Pages.DataCentral.ManageItemsModel

    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" />
        <script language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script language="javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    </head>
<h1>Manage Products</h1>
<div>
    <form method="post">
        <button asp-page="AddItem" class="btn btn-primary">Add Item</button>

        @if (Model.products.Count() > 0)
        {

            <table id="ProdTable" class="table table-striped border">
                <thead>
                    <tr class="table-secondary">
                        <th>
                            <label>ProdID</label>
                        </th>
                        <th>
                            <label>Product Description</label>
                        </th>
                        <th>
                            <label>Active</label>
                        </th>
                        <th>
                            <label>Sales Category</label>
                        </th>
                        <th>
                            <label>Prod Category</label>
                        </th>
                        <th>
                            <label>Genus</label>
                        </th>
                        <th>
                            <label>Variety</label>
                        </th>
                        <th>
                            <label>Color</label>
                        </th>
                        <th>
                            <label>Product Code</label>
                        </th>
                        <th>
                            <label>PPE Item #</label>
                        </th>
                        <th>
                            <label>NBG SKU</label>
                        </th>
                        <th>
                            <label>NBG UPC</label>
                        </th>
                        <th>
                            <label>GP Code</label>
                        </th>
                        <th>
                        </th>
                        <th>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var prod in Model.products)
                    {
                    <tr>
                        <td>
                            @Html.DisplayFor(m => prod.ProductID)
                        </td>
                        <td>
                            @Html.DisplayFor(m => prod.ProductDesc)
                        </td>
                        <td>
                            @Html.DisplayFor(m => prod.Active)
                        </td>
                        <td>
                            @Html.DisplayFor(m => prod.ProductCategory)
                        </td>
                        <td>
                            @Html.DisplayFor(m => prod.ProductionCategory)
                        </td>
                        <td>
                            @Html.DisplayFor(m => prod.Genus)
                        </td>
                        <td>
                            @Html.DisplayFor(m => prod.Variety)
                        </td>
                        <td>
                            @Html.DisplayFor(m => prod.Color)
                        </td>
                        <td>
                            @Html.DisplayFor(m => prod.ProductCode)
                        </td>
                        <td>
                            @Html.DisplayFor(m => prod.PPEItemNumber)
                        </td>
                        <td>
                            @Html.DisplayFor(m => prod.NBGSKU)
                        </td>
                        <td>
                            @Html.DisplayFor(m => prod.NBGUPC)
                        </td>
                        <td>
                            @Html.DisplayFor(m => prod.GPCode)
                        </td>
                        <td>
                            <button asp-page-handler="Delete" asp-route-id="@prod.ProductID" onclick="return confirm('Are you sure')" class="btn btn-danger btn-sm">Delete</button>
                        </td>
                        <td>
                            <a asp-page="EditItem" asp-route-id="@prod.ProductID" class="btn btn-success btn-sm text-white">Edit</a>
                        </td>
                    </tr>
                    }
                </tbody>
            </table>
        }
        else
        {
            <p>No Records Available</p>
        }
    </form>
</div>

@section Scripts{

    <script>
        $(document).ready(function () {
            $('#ProdTable').DataTable();
        });
    </script>
}

@page
@型号NBG_Central.Pages.DataCentral.ManageItemsModel
管理产品
添加项
@if（Model.products.Count（）>0）
{
普罗迪德
产品说明
活跃的
销售类别
产品类别
属
变化
颜色
产品代码
个人防护用品#
NBG SKU
NBG UPC
GP代码
@foreach（模型产品中的var产品）
{
@DisplayFor（m=>prod.ProductID）
@DisplayFor（m=>prod.ProductDesc）
@DisplayFor（m=>prod.Active）
@DisplayFor（m=>prod.ProductCategory）
@DisplayFor（m=>prod.ProductionCategory）
@DisplayFor（m=>prod.Genus）
@DisplayFor（m=>prod.Variety）
@DisplayFor（m=>prod.Color）
@DisplayFor（m=>prod.ProductCode）
@DisplayFor（m=>prod.PPEItemNumber）
@DisplayFor（m=>prod.NBGSKU）
@DisplayFor（m=>prod.NBGUPC）
@DisplayFor（m=>prod.GPCode）
删除
';
}
},
{
“呈现”：函数（数据、类型、完整、元）{返回“”；}
},
{
“呈现”：函数（数据、类型、完整、元）{返回“”；}
},
]
});                    
});
})
}
getTable（）；
产品ID
产品描述
活跃的
产品类别
生产类别
产品代码
项目编号
NBGSKU
NBGUPC
GPCode
属
变化
颜色

将服务器端选项设置为true，以便分页和搜索在服务器端正常工作：

$(document).ready(function() {
    $('#ProdTable').DataTable( {
        "processing": true,
        "serverSide": true
    } );
} );

好的，所以我不能让它与剃须刀页面一起工作，但是我确实让它与Blazor一起工作。此页面大约有4000条记录，加载时间约为1-2秒，具有完整的datatables.net功能

我的主机文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blazor</title>
    <base href="~/" />
    <environment include="Development">
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              asp-fallback-href="css/bootstrap/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
    </environment>
    <link href="css/site.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.18/datatables.min.css" />
</head>
<body>
    <app>@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))</app>
    <script src="_framework/blazor.server.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.18/datatables.min.js"></script>
</body>
</html>


布拉佐
*@
@*编辑*@
}
}
@代码{
私人产品[]产品；
受保护的重写异步任务OnInitializedAsync（）
{
product=ForecastService.getInventory（）；
}
AfterRenderAsync（bool firstRender）上受保护的重写异步任务
{
if（firstRender）
{
var jQuery=await JSRuntime.InvokeAsync（“$”，“table”）；
等待jQuery.InvokeVoidAsync（“数据表”）；
}
}
}

后端是否有需要执行的代码？此更改无助于加载它。它仍在尝试在前端分页开始之前呈现所有行。它是针对MVC的。。。但我认为它可以调整。。。

$(document).ready(function() {
    $('#ProdTable').DataTable( {
        "processing": true,
        "serverSide": true
    } );
} );

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blazor</title>
    <base href="~/" />
    <environment include="Development">
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              asp-fallback-href="css/bootstrap/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
    </environment>
    <link href="css/site.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.18/datatables.min.css" />
</head>
<body>
    <app>@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))</app>
    <script src="_framework/blazor.server.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.18/datatables.min.js"></script>
</body>
</html>

@using BlazorDataTables.Data
@using BlazorDataTables.Objects

@inject WeatherForecastService ForecastService
@inject IJSRuntime JSRuntime


@if (product is null)
{
    <p>Loading...</p>
}
else
{
    <table class="table table-striped">
        <thead>
            <tr class="table-secondary">
                <th>
                    <label>ProdID</label>
                </th>
                <th>
                    <label>Product Description</label>
                </th>
                <th>
                    <label>Active</label>
                </th>
                <th>
                    <label>Sales Category</label>
                </th>
                <th>
                    <label>Prod Category</label>
                </th>
                <th>
                    <label>Genus</label>
                </th>
                <th>
                    <label>Variety</label>
                </th>
                <th>
                    <label>Color</label>
                </th>
                <th>
                    <label>Product Code</label>
                </th>
                <th>
                    <label>PPE Item #</label>
                </th>
                <th>
                    <label>NBG SKU</label>
                </th>
                <th>
                    <label>NBG UPC</label>
                </th>
                <th>
                    <label>GP Code</label>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var prod in product)
            {
                <tr>
                    <td>
                        @prod.ProductID
                    </td>
                    <td>
                        @prod.ProductDesc
                    </td>
                    <td>
                        @prod.Active
                    </td>
                    <td>
                        @prod.ProductCategory
                    </td>
                    <td>
                        @prod.ProductionCategory
                    </td>
                    <td>
                        @prod.Genus
                    </td>
                    <td>
                        @prod.Variety
                    </td>
                    <td>
                        @prod.Color
                    </td>
                    <td>
                        @prod.ProductCode
                    </td>
                    <td>
                        @prod.PPEItemNumber
                    </td>
                    <td>
                        @prod.NBGSKU
                    </td>
                    <td>
                        @prod.NBGUPC
                    </td>
                    <td>
                        @prod.GPCode
                    </td>
                    <td>
                        <button class="btn btn-danger btn-sm" onclick="ShowHide(" test")">Delete</button>
                    </td>
                    <td>
                        @*<a href="@($"Admin/EditAdministrator/{administrator.Id}")" class="btn btn-primary table-btn">
                                Edit
                            </a>*@
                        @*<a class="btn btn-success btn-sm text-white">Edit</a>*@
                    </td>
                </tr>

            }
        </tbody>
    </table>
}
@code {
    private Product[] product;

    protected override async Task OnInitializedAsync()
    {
        product = ForecastService.GetInventories();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var jQuery = await JSRuntime.InvokeAsync<IJSObjectReference>("$", "table");
            await jQuery.InvokeVoidAsync("DataTable");
        }
    }
}