提问人：njlqay 提问时间：6/28/2016 最后编辑：Communitynjlqay 更新时间：12/14/2017 访问量：16386
数据表处理信息不显示
DataTables Processing Info does not show up
问：
我在jQuery UI TABS中包含了我的服务器端处理DataTables，但是集成后，处理信息不再显示:(
这篇 stackoverflow.com 文章写了一些关于隐藏的“Processing...”-Div 的文章。
我的情况是否可能与“z-index”问题匹配？
这是 DataTables 代码：
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "ajax_ssp_class.php",
"type": "GET"
},
"order": [ [0,'asc'] ],
"paging":true,
"pagingType": "simple_numbers",
"pageLength": 50,
"lengthMenu": [[50, 100, 250, -1], [50, 100, 250, "All"]],
"lengthChange": true
} );
});
div 是否存在的证明被测试为 true：
<div id="example_processing" class="dataTables_processing" style="display: block; z-index: 10000;">Processing...</div>
解决方案
我在预绘图中添加了以下行。现在它起作用了。
"fnPreDrawCallback":function(){
//alert("Pre Draw");
$('#example_processing').attr('style', 'font-size: 20px; font-weight: bold; padding-bottom: 60px; display: block; z-index: 10000 !important');
}
答：
1赞
Andrei Zhytkevich
6/28/2016
#1
检查您是否有元素 .$('.dataTables_processing')
如果它可用，请尝试设置为非常高的值并显示它：z-index
$('.dataTables_processing').css({"display": "block", "z-index": 10000 })
在浏览器控制台中执行此操作。
评论
0赞
njlqay
6/28/2016
该元素存在，由 $（'.dataTables_processing'）.length 证明。但它没有显示......（使用 Z 索引进行测试）
0赞
Andrei Zhytkevich
6/28/2016
您需要使用浏览器开发工具找到此元素的位置。您正在寻找的元素可能在屏幕之外，或者仍然不够大。z-index
0赞
njlqay
6/28/2016
我对调试没有那么深入。除了您提到的现有 div 证明之外，您能否举一个 firebug 的例子？
0赞
Andrei Zhytkevich
6/28/2016
我更喜欢 Chrome 开发工具 developer.chrome.com/devtools#dom-and-styles。在控制台中运行，然后右键单击结果并选择 .当您将鼠标悬停在 DOM 中的元素上时，它应该在页面上突出显示$('.dataTables_processing')Reveal...
16赞
Repton Bloke
7/11/2017
#2
我遇到了类似的问题，即在使用服务器端处理然后使用搜索、重新排序或更改页面大小时，处理文本没有显示出来。修复方法是添加以下 CSS...
<style type="text/css">
.dataTables_processing {
top: 64px !important;
z-index: 11000 !important;
}
</style>
这里的关键是 z-Index 和 top。
这也取决于是否
"processing": true,
在数据表初始化中
评论
0赞
amal50
7/19/2018
这就是解决方案
0赞
ikel
9/29/2019
非常感谢，我一直在寻找这个解决方案
13赞
Dixit Solanki
12/14/2017
#3
- “processing”选项需要设置为 true 和
- 在“sDom”选项中，需要字母“r”。
进行修改后，最终代码如下所示：
var options = {
"sDom": 'prtp',
"processing": true,
"serverSide": true,
"ajax": "/path/to/my/ajax.php"
}
var oTable = $('.datatables').dataTable(options);
评论
0赞
Michael
5/19/2021
我不得不将 Repton 的 z-index 解决方案与“sDom”选项结合起来。
评论
$('.dataTables_processing').css("visibility","visible");