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

手撕代码八百里

发布于 2020-07-28 16:13:27

1.7K0

发布于 2020-07-28 16:13:27

文章被收录于专栏：猿计划猿计划

如果配置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');
	}
})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-08-30 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html