Javascript jquerydatatable-“查询数据表”；处理「；不出现

我在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,
    ....
}),

更新-添加服务器端后：true

我最初在数据表定义中添加了“serverSide:true”，但在出现以下错误后将其删除：“中第36行第442列的未处理异常 0x800a138f-JavaScript运行时错误：无法设置未定义或空引用的属性“data”

我在页面上有两个数据表，单击“提交”按钮时会填充它们。这就是我设置和填充它们的方式（为了简洁起见，我只包含一个数据表）

---

只有启用了服务器端处理，才会显示处理消息。在本例中，您将看到它会短暂地弹出，但由于数据集很小，处理时间很短

    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" }
    ]
} ); 

---

如果这不能为您解决问题，并且没有显示处理消息，那么粘贴整个表的初始化代码是值得的。

您的流程是否在

服务器端

？它基本上在服务器端工作。但是如果它在

客户端

，我想你必须做一个自定义的

处理

@Drenyl我把它作为数据表定义的一部分，但被删除了。请参阅我的更新。注意，

服务器端处理

意味着

数据表

正在根据需要向服务器发送参数，如

绘制

，

开始

，

长度

。它需要一个返回的数据，比如

recordstotal

，

data

，等等。请查看我的更新帖子。我确实有serverSide:true，但它导致了JS错误。

"preDrawCallback": function () {
    $('.dataTables_processing').attr('style', padding-bottom: 60px; display: block; z-index: 10000 !important');
},

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" }
    ]
} );