[英]jQuery DataTable - “Processing” does not appear
我在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>
這部分起作用。 它顯示單詞“正在處理...”,但在填充表格時不會消失。 此外,它還會顯示在頁面回發中,就像在下拉列表中進行選擇一樣,大概是因為我正在回發中重畫。
"preDrawCallback": function () {
$('.dataTables_processing').attr('style', padding-bottom: 60px; display: block; z-index: 10000 !important');
},
更新-添加serverSide:true之后
我最初在數據表定義中添加了“ serverSide:true”,但在收到此錯誤后將其刪除:“第36行未處理的異常,位於https://cdn.datatables.net/1.10.16/js/jquery.dataTables中的第 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" }
]
} );
如果這樣做不能解決您的問題,並且不顯示處理消息,則值得粘貼整個表的初始化代碼。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.