Spinner для обработки на стороне сервера jquery datatable

Question

У меня есть версия 1.10 с данными на jquery с обработкой на стороне сервера.Все работает нормально.Однако мое требование - показывать счетчик для каждого вызова 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();         
    },

У меня есть две функции, то есть стартовая и стоповая остановка, которые я хочу вызвать после выполнения вызова ajax и после завершения.

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

}

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

}

Answer 1

Речь идет не о ваших функциях запуска и остановки вращения, решение вашей проблемы - разместить эти функции в нужном месте.

Когда вы запускаете вызов ajax, вы вызываете spinStart.Как только вызов ajax завершен, вы вызываете spinStop внутри обратного вызова ajax, чтобы остановить спиннер.

Также, пожалуйста, предоставьте свою функцию вызова 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 success.

Вместо этого DataTable предоставляет две функции для запуска события рисования: preDrawCallback и drawCallback

Рабочий процесс должен быть:

1. вызов spinStart внутри preDrawCallback, чтобы показать счетчик
2. вызов 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();
    }