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

问题描述 投票：0回答：3

我有一个带有服务器端处理的 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();
}
jquery datatables spinner server-side
3个回答
6
投票

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

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

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

});
3
投票

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

当你开始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。

编辑2：

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

看起来ajax调用成功回调并不是直接触发DataTable刷新并显示新数据，所以如果将

spinStop
函数放在ajax成功回调中将不起作用。

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

0
投票

var dataTable = $('#lead_infos').DataTable({ “o语言”：{ “sEmptyTable”：

<div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div>
} }); 函数 TableData(leadData = "全部") { 让 accessToken = localStorage.getItem("access_token");

dataTable.clear().draw();

$.ajax({
    url: server_url + `/leads/list_paid_leads/?status=${leadData}`,
    type: 'GET',
    headers: {
        'Authorization': 'Bearer ' + accessToken
    },
    success: function(data) {
        // Clear existing rows in the DataTable
        if(data.status){
        dataTable.clear().draw();
        // Process the data and add rows to the DataTable
        if(data.data.length){
            data.data.forEach((el) => {
            let stars = '';
            if (el.rating > 0) {
                for (let i = 0; i < el.rating; i++) {
                    stars += '<span class="fa-2x fa fa-star" style="color: rgb(245, 193, 7);"></span>';
                }
            } else {
                stars = '-';
            }
            // Add a row for each agent
            var rowNode = dataTable.row
                .add([
                    `<div class="emp_info title_manage scraping_content"><span  data-bs-toggle="tooltip" data-bs-placement="top" data-leadId = ${el.lead_id}  title="${el.status}" class = ${el.status=="pending"?"circle_yellow":el.status=="lost"?"circle_red":el.status=="converted"?"circle_green":"-"}></span></div>`,
                    `<div class="emp_info title_manage"><span  data-bs-toggle="tooltip" data-bs-placement="top" data-leadId = ${el.lead_id}  title="${el.client_full_name}">${el.client_full_name ? el.client_full_name : '-'}</span></div>`,
                    `<div class="emp_info title_manage"><span  data-bs-toggle="tooltip" data-bs-placement="top" data-leadId = ${el.lead_id}  title="${el.country.name}">${el.country.name ? el.country.name : '-'}</span></div>`,
                    `<div class="emp_info title_manage"><span  data-bs-toggle="tooltip" data-bs-placement="top" data-leadId = ${el.lead_id}  title="${el.lead_type}">${el.lead_type ? el.lead_type : '-'}</span></div>`,
                    `<div class="emp_info title_manage"><span  data-bs-toggle="tooltip" data-bs-placement="top" data-leadId = ${el.lead_id}  title="${el.lead_service}">${el.lead_service ? el.lead_service : '-'}</span></div>`,
                    `<div class="emp_info title_manage"><span  data-bs-toggle="tooltip" data-bs-placement="top" title="${el.expected_sales}">${el.expected_sales ? el.expected_sales : '-'}</span></div>`,
                    `<div class="emp_info title_manage"><span  data-bs-toggle="tooltip" data-bs-placement="top" title="${el.rating}">${stars}</span></div>`,
                    `<div class="emp_info title_manage"><span  data-bs-toggle="tooltip" data-bs-placement="top" title="${el.date}">${el.date ? el.date : '-'}</span></div>`,
                    `<div class="emp_info title_manage"><span  data-bs-toggle="tooltip" data-bs-placement="top" title="${el.last_updated}">${el.last_updated ? el.last_updated : '-'}</span></div>`,
                    `<div class="emp_info">
                        <div class="icon-container">
                            <span class="dropdown-icon"><img src="/static/images/horizontal-dots.png" alt="" class="dropdown-icon"></span>
                            <div class="dropdown-menu1">
                                <a href="/lead_detail/?pk=${el.lead_id}">View Lead</a>
                                <a href="javaScript:void(0)" class="set_comment" data-id="${el.lead_id}">Add Comment</a>
                                <a href="/create_paid_lead/?pk=${el.lead_id}">Edit Lead</a>
                            </div>
                        </div>
                    </div>`
                ])
                .draw(false)
                .node();
            $('[data-bs-toggle="tooltip"]').tooltip();
        });
        }else{
            dataTable.clear().draw();
        $('.odd').each(function (index, val) {
          if (index === 0) {
            $(this).remove()
          }

        })
        $('#lead_infos tbody').append('<tr class="odd"><td valign="top" colspan="10" class="dataTables_empty">No data found</td></tr>');


        }
       
    }else{
        showNotification('error',data.message);
        dataTable.clear().draw();
        $('.odd').each(function (index, val) {
          if (index === 0) {
            $(this).remove()
          }

        })
        $('#lead_infos tbody').append('<tr class="odd"><td valign="top" colspan="10" class="dataTables_empty">No data found</td></tr>');


    }
    },
    error: function(error) {
        showNotification('error',error.statusText);
        dataTable.clear().draw();
        $('.odd').each(function (index, val) {
          if (index === 0) {
            $(this).remove()
          }

        })
        $('#lead_infos tbody').append('<tr class="odd"><td valign="top" colspan="10" class="dataTables_empty">No data found</td></tr>');



    }
});

}

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.