Question

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

这是我的代码：

$("#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();         
    },

我有两个功能，即开始进行Ajax调用并完成之后要调用的startspin和stoppin。

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');
    }

});

Answer 2

这与您的开始和停止旋转功能无关，解决您的问题的方法是将这些功能放置在正确的位置。

启动ajax调用时，将调用spinStart。 Ajax调用完成后，您可以在ajax回调中调用spinStop以停止微调器。

另外，请提供有关您的问题的ajax调用功能，这将有助于调试问题。

EDIT1：

"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函数放在ajax成功回调中，它将无法正常工作。

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

工作流程应为：

在spinStart内致电preDrawCallback以显示微调框
在spinStop内致电drawCallback以停止微调器

$("#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();
    }

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

2 个答案: