javascript - jQuery DataTable - “处理中”不出现
问题描述
我在 jQuery 数据表中显示处理消息时遇到问题。我四处寻找这个问题并遵循所有建议无济于事。只有一个建议有效,但部分有效。
我试过了:
var tblFacCert = $("#tblFacCert").on('processing.dt', function (e, settings, processing) {
if (processing) {
if ($('#imgLoad').length == 0)
$(this).prepend('<img id="imgLoad" src="../assets/images/PleaseWait.gif" alt="" />');
}
else
$('#imgLoad').remove();
}).DataTable({
dom: 'lfrtip',
processing: true,
....
}),
还:
<style type="text/css">
#tblFacCert_processing {
top: 64px !important;
z-index: 11000 !important;
visibility:visible;
background-image:url("../assets/images/PleaseWait.gif"); background-repeat:no-repeat;
}
</style>
这部分有效。它显示单词“Processing ...”,但在填充表格时不会消失。此外,它显示在页面回发上,就像在下拉列表中进行选择一样,大概是因为我在回发上重绘。
"preDrawCallback": function () {
$('.dataTables_processing').attr('style', padding-bottom: 60px; display: block; z-index: 10000 !important');
},
更新 - 添加 serverSide:true 后
我最初在数据表定义中添加了“serverSide:true”,但在收到此错误后将其删除:“未处理的异常在https://cdn.datatables.net/1.10.16/js/jquery.dataTables中的第 36 行第 442 列.min.js 0x800a138f - JavaScript 运行时错误:无法设置未定义或空引用的属性“数据”。
我在页面上有两个数据表,单击“提交”按钮时会填充它们。这就是我设置和填充它们的方式(为了简洁起见,我包括一个数据表)
var tblFacCert = $("#tblFacCert").DataTable({
jQueryUI: true,
"serverSide": true, // This causes error
data: [],
dom: 'lfrtip',
processing: true,
stateSave: true,
"lengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]],
order: [[0, "asc"], [1, "asc"], [2, "asc"], [3, "asc"]],
"columns": [
{
"data": "Area"
}, {
"data": "District"
}, { ... more columns ...}
],
"columnDefs": [ ...
],
"pageLength": 15,
deferRender: true,
scrollCollapse: true,
scroller: true,
"preDrawCallback": function () {
$('#tblFacCert_processing').attr('style', 'padding-bottom: 60px; display: block; z-index: 10000 !important');
},
"rowCallback": function (row, data, index) {
...
}
});
// Get data for both data tables and populate
$("#btnSubmit").on("click", function (event) {
var facCertUrl = "../services/easg.asmx/GetComplianceReportData";
var facCertParams = "{ 'startDate': '" + $("#tbStartDate").val() + "', 'certID': '" + $('#ddlCertificate').val() + "'}";
var statsUrl = "../services/easg.asmx/GetFacComplianceByArea";
var statsParams = "{ 'startDate': '" + $("#tbStartDate").val() + "', 'certID': '" + $('#ddlCertificate').val() + "'}";
populteTable(statsUrl, statsParams, tblStats);
populteTable(facCertUrl, facCertParams, tblFacCert);
})
function populteTable(ws_url, parameters, table) {
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
url: ws_url,
cache: false,
data: parameters,
}).done(function (result) {
table.clear().draw();
table.processing = true;
jResult = JSON.parse(result.d);
table.rows.add(jResult).draw();
}).fail(function (jqXHR, textStatus, errorThrown) {
alert(textStatus + ' - ' + errorThrown);
});
}
解决方案
仅当您启用了服务器端处理时,才会显示处理消息。在此处的示例中,您会看到它短暂地弹起,但只是因为数据集很小,所以处理时间很短。
var dt = $('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "/ssp/objects.php",
"columns": [
{ "data": "first_name" },
{ "data": "last_name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
如果这不能为您解决问题,并且它不显示处理消息,那么值得粘贴您的整个表初始化代码。
推荐阅读
- python - 有没有办法使用 Selenium python 计算页面中的项目
- python - 谷歌翻译库正在打印
而不是文字 - mysql - 库存系统的复杂 SQL 查询
- javascript - 使用 featherjs 设置生产
- java - 如何通过反射初始化类并指定类的泛型类型
- php - Codeigniter 检查编辑功能上的重复项
- php - PHP:AdjacentElementsProduct - CodeFights https://app.codesignal.com/arcade/intro/level-2/
- c# - 制作、保存和显示 bmp
- sql - 动态地将日期行旋转到列标题中,并为每个日期重复未透视的列
- google-docs-api - 我希望能够使用 API 以编程方式将 Google 演示文稿中的幻灯片插入(链接)到 Google 文档中