用于 jquery 数据表服务器端处理的 Spinner

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 调用，因此您可以使用“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');
    }

});