jquery 数据表的服务器端处理微调器

Question

我有一个 jquery 数据表版本 1.10，带有服务器端处理。一切正常。但是，我的要求是为每个 ajax 调用显示一个微调器，而不是默认的“正在处理...”消息。尝试了多种方法都没有用。

这是我的代码：

$("#table-pp").DataTable({
    "processing": true,
    "order": [[2, "asc"]],  
    "pagination": true,
    "language": {
        "infoFiltered": "",
        "processing": "Loading. Please wait..."
    },
    "serverSide": true,
    "destroy": true,
    "ajax": {
        "type": "POST",
        "url": "/Site/test/GetData",
        "data": { param: XYZ},
        "error": function (e) {
        },
        "dataSrc": function (json) {               
            json.draw = json.draw;
            json.recordsTotal = json.recordsTotal;
            json.recordsFiltered = json.recordsFiltered;
            return json.data;
        }
    },
    "initComplete": function () {
        //spinStop();         
    },

我有两个函数，即 startspin 和 stopspin，我想调用一次 ajax 调用完成后。

function spinStart() {
    $('#test_center').show().spin({ color: '#fff' });
    $('#test').show();
}


function spinStop() {
    $('#test, #test_center').hide();
}

Answer 1

这与您的启动和停止自旋函数无关，您的问题的解决方案是将这些函数放在正确的位置。

当您开始 ajax 呼叫时，您会呼叫 spinStart。 ajax 调用完成后，您可以在 ajax 回调中调用 spinStop 来停止微调器。

此外，请将您的 ajax 调用函数与您的问题一起提供，这将有助于调试您的问题。

编辑 1：

"language": { processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '}

那是 FontAwesome 微调器。或者，您可以将其替换为一个小的旋转器 gif。

EDIT2:

如果您不想使用 GIF 或 FontAwesome，完全没有问题。

好像ajax调用成功回调不是DataTable刷新显示新数据的直接触发，所以把spinStop函数放在[=58里面就不行了=] 成功回调。

相反，DataTable 提供了两个函数来触发绘制事件，分别是preDrawCallback and drawCallback

工作流程应该是：

在 preDrawCallback 中调用 spinStart 以显示旋转器
在 drawCallback 中调用 spinStop 来停止微调器

$("#table-pp").DataTable({
    "processing": true,
    "order": [[2, "asc"]],  
    "pagination": true,
    "language": {
        "infoFiltered": "",
        "processing": "Loading. Please wait..."
    },
    "serverSide": true,
    "destroy": true,
    "ajax": {
        "type": "POST",
        "url": "/Site/test/GetData",
        "data": { param: XYZ},
        "error": function (e) {
        },
        "dataSrc": function (json) {               
            json.draw = json.draw;
            json.recordsTotal = json.recordsTotal;
            json.recordsFiltered = json.recordsFiltered;
            return json.data;
        }
    },
    'preDrawCallback': function(settings) {
      spinStart();
    },
    'drawCallback': function(settings) {
      spinStop();
    }

Answer 2

我知道这是旧的，但可能会对其他人有所帮助。因为它只是一个 ajax 调用，所以你可以使用 'beforeSend' 和 'complete' 函数来显示和隐藏加载程序。

这是一个示例 （顺便说一句，我正在使用这个库进行加载 - https://gasparesganga.com/labs/jquery-loading-overlay/） -

$(document).ready(function () {
var table = $('#myTable').DataTable({
    fixedHeader: true,
    pagingType: "full_numbers",
    header: "jqueryui",
    pageButton: "bootstrap",
    responsive: true,
    colReorder: true,
    scrollY: 200,
    deferRender: true,
    proccessing: true,
    serverSide: true,

    ajax: {
        url: "PropertyLimitOverride",
        type: 'POST',
        headers: { 'RequestVerificationToken': $('@Html.AntiForgeryToken()').val() },
        beforeSend: function () {
            $("#listCard").LoadingOverlay("show", {
                background: "rgba(1, 56, 63, 0.5)"
            });
        },
        complete: function () {
            $("#listCard").LoadingOverlay("hide");
        },
    },
    columnDefs: [
        {
            "name": "Added",
            "data": "added",
            "targets": 0,
            "render": function (data, type, row, meta) {
                return new Date(Date.parse(data)).toLocaleDateString("en-GB");
            },
        },
        {
            "name": "Address",
            "data": "address",
            "targets": 1,
        },
        {
            "name": "Limit",
            "data": "limit",
            "targets": 2
        },
        {
            "name": "EndDate",
            "data": "endDate",
            "targets": 3,
            "render": function (data, type, row, meta) {
                return new Date(Date.parse(data)).toLocaleDateString("en-GB");
            }
        },
        {
            "targets": -1,
            "data": null,
            "render": function (data, type, row, meta) {
                return '<a href="/customers/edit/' + row.uprn + '">Edit</a> | <button>Delete</button>';
            },
            "sortable": false
        },
    ],
    order: [[0, "desc"]],
    drawCallback: function () {
        $('.page-item').removeClass('paginate_button');
    }

});

jquery 数据表的服务器端处理微调器

Spinner for server side processing of jquery datatable

jquery

server-side

datatables

spinner