包含datatable的索引页大约需要6-7秒才能显示搜索框

Question

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

这是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());
    }

这是搜索框。

​

Answer 1

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

您还可以使用datatable附带的进度指示器。你所要做的就是：

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

对于服务器端逻辑，您可以遵循here中的代码。