[英]Is it possible to show spinner/loading-msg for HTML sourced data in jQuery-DataTables?
Our server is rendering a <table>
element with about 1000 lines of data in HTML.我们的服务器正在渲染一个
<table>
元素,其中包含大约 1000 行 HTML 数据。 Client JS then initializes the DataTable from this HTML data .客户端 JS 然后从这个HTML 数据初始化 DataTable。 However, on client it takes about ~3-5 second before DataTable is fully initialized and pagination is shown.
但是,在客户端上大约需要 3-5 秒才能完全初始化 DataTable 并显示分页。 During this time, full 1000 rows are rendered and visible in DOM.
在此期间,完整的 1000 行在 DOM 中呈现并可见。 I didn't find it in DataTable documentation, but is there a way to show a "processing" message, or spinner while datatable in processing the dom HTML?
我没有在 DataTable 文档中找到它,但是有没有办法在处理 dom HTML 的数据表时显示“处理”消息或微调器?
Such option is available of ajax or server-side-processing source, but didnt find it for HTML data source.这样的选项可用于 ajax 或服务器端处理源,但没有找到它用于 HTML 数据源。
You have add below option in your datatable config.您在数据表配置中添加了以下选项。
"processing": true & oLanguage: {sProcessing: "<div id='loader'></div>"}
Suppose if we consider your table id is "example".假设我们认为您的表 id 是“示例”。
JS code: JS代码:
$('#example').DataTable( {
"processing": true,
responsive: true,
oLanguage: {sProcessing: "<div id='loader'></div>"}
});
CSS for loader :加载器的 CSS:
#loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
margin-left:200px;
margin-top:30px;
}
Note : You have adjust css as per your datatable注意:您已根据数据表调整 css
For Working example you visit below link:对于工作示例,您访问以下链接:
http://jsfiddle.net/dipakthoke07/ebRXw/3302/ http://jsfiddle.net/dipakthoke07/ebRXw/3302/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.