datables之加载数据时显示进度条

简介: datables之加载数据时显示进度条

如果配置datables加载数据的时候显示进度条呢?

如下图所示效果:

这个功能采用模态框实现,弹出模态框和关闭模态框

HTML代码:(随便放在一个位置,因为是隐藏的)

<%--等待加载数据滚动条模态框--%>
<div class="modal fade" id="loadingModal">
  <div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-100px">
    <div class="progress progress-striped active" style="margin-bottom: 0;">
      <div class="progress-bar" style="width: 100%;"></div>
    </div>
    <h5 style="color:black"> <strong>正在加载...请稍等!</strong> </h5>
  </div>
</div>

何时显示模态框(动态的进度条)呢

初始化datables的时候显示这个模态框

代码如下:

//显示加载数据的进度条
$("#loadingModal").modal('show');

何时关闭模态框呢?

初始化datbales的时候关闭模态框

var table = $('#taaa').dataTable({
  initComplete: function(settings, json) {  //当datables初始化完毕时
    //关闭加载数据的等待进度条
    $('#loadingModal').modal('hide');
  }
})
目录
相关文章
|
4月前
|
JavaScript
成功解决:el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。(每次页面刷新后、第一次打开dialog窗口、图片数不加载)
这篇文章分享了解决Vue中`el-dialog`弹出窗口在第一次打开时数据未加载问题的技巧,通过改变组件的`key`属性来强制Vue重新渲染DOM,从而确保数据正确加载。
成功解决:el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。(每次页面刷新后、第一次打开dialog窗口、图片数不加载)
ECharts 饼图切换数据源bug 开始没数据显示 切换或刷新后显示
ECharts 饼图切换数据源bug 开始没数据显示 切换或刷新后显示
154 0
|
7月前
|
弹性计算 运维 Shell
动态时针进度条
【4月更文挑战第29天】
34 0
|
缓存 C# 块存储
使用双缓冲技术解决winform窗体控件卡顿(dataGridView加载数据缓慢)
使用双缓冲技术解决winform窗体控件卡顿(dataGridView加载数据缓慢)
1461 0
echarts关于自定义饼图数据刷新和颜色渲染问题
echarts关于自定义饼图数据刷新和颜色渲染问题
213 0
LabVIEW显示控件中内容过长设置自动滚动条
本篇博文分享程序设计时一个细节小技巧,在LabVIEW显示控件中内容过长设置自动滚动条。
|
Android开发 开发者