如何隐藏GridView直到DataTable加载完成以避免加载闪烁问题

问题核心原因 #

• 此前使用的fnDrawCallback是Datatables的每次重绘回调，分页、排序、搜索操作都会触发，并非初始化完成的专属回调，触发时机不符合需求
• 代码存在语法错误：jQuery对象不能直接调用原生DOM的style.display属性
• run-in类型的display属性兼容性差，不适配多数现代浏览器的表格元素渲染
• 若通过JS在页面加载后再隐藏GridView，会出现先渲染可见、再被JS隐藏的时间差，直接导致闪烁

修正后代码 #

HTML代码 #

保留服务端控件的初始隐藏样式，确保浏览器首次渲染时GridView就是不可见的，从根源避免初始闪烁：

<div class="spinner-border text-primary" style="display:block" id="spinner" runat="server" role="status">
  <span class="sr-only">Loading...</span>
</div>
<asp:GridView ID="GridViewParts" style="display:none" OnRowDataBound="GridViewQuotes_RowDataBound"
runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSourcePart" >
<!-- 你的其他列配置保持不变 -->
</asp:GridView>

JS脚本代码 #

将显示逻辑移到Datatables专属的initComplete初始化完成回调中，使用jQuery原生方法保证兼容性：

$(document).ready(function () {
  var table = $('#<%= GridViewParts.ClientID %>').DataTable({
    // 此处保留你原有Datatables的其他配置，比如分页、搜索、列配置等
    "initComplete": function () {
      // 隐藏加载指示器
      $('#<%= spinner.ClientID %>').hide();
      // 直接调用jQuery的show方法，自动适配表格的display属性，兼容性更好
      $('#<%= GridViewParts.ClientID %>').show();
    }
  });
});

可选优化（体验升级） #

如果需要更顺滑的显示效果，避免显示时的生硬跳转，可以添加过渡效果：

1. 新增CSS样式

.grid-wrap {
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}
.grid-wrap.loaded {
  opacity: 1;
  visibility: visible;
}

2. 将GridView包裹在对应类名的容器中，回调时给容器加loaded类即可。

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