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

时间:2022-07-22
本文章向大家介绍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');
	}
})