DataTable索引页加载12k条数据延迟，如何添加加载提示直至搜索框显示

实现方案 #

1. 新增加载提示元素

在Index.cshtml的表头下方、表格上方添加默认显示的加载提示DOM：

@model IEnumerable<BSMV2.Models.StoAppnOrgView>
<h2>LIST OF STONES</h2>
<!-- 新增加载提示，可自行修改样式适配页面风格 -->
<div id="loadingTip" style="padding: 30px 0; text-align: center; font-size: 16px; color: #666;">
    数据加载中，请稍候...
</div>
<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>
</table>

2. 调整DataTable初始化代码

修改脚本部分，添加deferRender优化渲染性能，同时通过initComplete回调监听初始化完成事件，触发后隐藏加载提示：

@section Scripts{
<script type="text/javascript">
    $(document).ready(function () {
        $('#applicationTable').DataTable({
            // 开启延迟渲染，仅渲染当前页可见行，大幅提升万条数据下的初始化速度
            "deferRender": true,
            // 表格完全初始化完成（搜索框、分页等控件都渲染完毕）后触发
            "initComplete": function() {
                $('#loadingTip').hide();
            }
        });
    });
</script>
}

进阶优化建议（可选） #

如果后续数据量继续增长，建议开启DataTable服务端分页模式，避免一次性加载全量数据：

1. JS部分开启serverSide: true，配置ajax接口地址，不再需要服务端渲染tbody内容
2. 控制器端接收DataTable的分页、搜索、排序参数，返回对应页的数据即可，可将页面加载耗时压缩到毫秒级

内容的提问来源于stack exchange，提问作者Waller