时间戳

首页 > 解决方案 > 带有数据表的索引页面在显示搜索框之前大约需要 6-7 秒

c# - 带有数据表的索引页面在显示搜索框之前大约需要 6-7 秒

问题描述

我有一个简单的索引页面。当我加载只有 500 条记录的页面时，搜索框会立即显示。但是对于 12k 条记录，这需要一些时间。有没有办法可以显示 LOADING 消息，并且在加载搜索框后，LOADING 消息会消失。

这是 Index.cshtml

@model IEnumerable<BSMV2.Models.StoAppnOrgView>
<h2>LIST OF STONES</h2>
<table id="applicationTable" class="table table-striped table-bordered">
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Stone)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Applicant)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Org)
        </th>
        <th></th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Stone)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Applicant)
            </td>
            <td>
                {@Html.DisplayFor(modelItem => item.Org)
            </td>
            <td>
                @Html.ActionLink("Details", "Details", new { Id = item.Id })
            </td>
        </tr>
    }
</tbody>

@section Scripts{
<script type="text/javascript">

    $(document).ready(function () {
        $('#applicationTable').DataTable();
    });

</script>}

这是控制器

    public async Task<ActionResult> Index()
    {
        return View(await db.StoAppnOrgViewObj.ToListAsync());
    }

这是搜索框。 在此处输入图像描述

标签： c#.netasp.net-mvcdatatabledatatables

解决方案

您不应该在 UI 上加载所有 12k 数据。取而代之的是使用服务器端分页，这将为用户提供类似的体验，但性能方面会更快。系统不会变慢。数据会随着时间的推移而增长，将来无论如何您都必须转向服务器端逻辑。

您还可以使用数据表附带的进度指示器。您只需执行以下操作：

$('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "../server_side/scripts/test.php"
    } );

对于服务器端逻辑，您可以按照此处的代码进行操作。

推荐阅读