Datatables jQuery 完成后才会显示模式

Question

我在对 ASP NET 项目实施数据表 jQuery（版本 1.10）时遇到问题。问题是我正在主 JavaScript 文件中加载所有必要的配置。

我首先将所有数据绑定到一个Gridview中，然后自动执行上面提到的JavaScript文件。

我的问题是（由于我的后端结构，我无法使用 AJAX）我需要在代码隐藏 (C#) 中绑定 gridview 中的所有数据，并且，一旦数据已经绑定，应用 JavaScript 脚本。一切正常。但是，数据表的CSS和JavaScript准备好之前，数据绑定需要一些时间。同时，gridview 以糟糕的风格显示给用户，所以我想避免这种情况，因为它不利于用户体验。

我正在尝试这个（JavaScript）

openModal('id_modal');
load_datatable('id_table'); //function that loads all necessary for 
                            //datatables

但是模态框出现在 load_datatable 完成之后。我不知道这可能是什么原因造成的。

值得一提的是 master JavaScript 工作正常。样式已成功应用，但同样没有显示模式。

我要弹出的模态是

<div class="modal fade" id="id_modal">
        <div class="text-center">
            <asp:Image ID="imgLoading" runat="server" 
              ImageUrl="~/img/loading.svg" AlternateText="Loading..." 
               ToolTip="Loading ..." CssClass="imageLoading" />
        </div>
    </div>

我也试过没有图像、没有 ASP 控件等的简单模式，但没有任何反应。

Answer 1

我找到了部分解决方案。

在我创建的母版页中

<div class="loader"></div>

位于 HTML 代码的顶部。

然后在 masterPage.css 中我定义了 class:

    .loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #212529;
    background: /*HERE IT GOES THE IMAGE YOU WANT TO DISPLAY*/
    opacity: .9;
}

最后，在我的 Master.js 中：

$(document).ready(function(){
    //DO ALL THE STUFF YOU NEED
    //AND AT THE END

    $('.loader').hide();     
});

它会在每次加载 Web 表单时显示模式，并在加载所有 HTML 时隐藏它。

Datatables jQuery 完成后才会显示模式

Modal isn't shown until Datatables jQuery is finished

html

javascript

popup