【问题标题】:Datatables: How to show a message while data is exported (Excel, PDF, etc)?数据表:如何在导出数据(Excel、PDF 等)时显示消息?
【发布时间】:2019-10-03 17:17:57
【问题描述】:

我使用 DataTables 按钮插件将我的数据导出到 Excel、PDF 等。但是当必须导出多行数据时,该过程有时会在创建文件时花费大量时间,我喜欢显示一条消息:表示下载正在进行中,直到出现“另存为”窗口。

我只是在datatable的初始化中实现了标准的按钮配置。

非常感谢您提出任何想法或建议。

【问题讨论】:

  • 您是否尝试过搜索一些在线资源? Like this one
  • @ZombieChowder 感谢您的建议,我将对其进行审核并分享结果。

标签: javascript django datatables


【解决方案1】:

当我使用服务器端处理来获取我的数据表的数据时,我启用了“处理”和“bprocessing”选项并使用如下语言参数自定义微调器:

$('#my_table').DataTable({
        "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
        "columnDefs": [
            { "className": "dt-body-center", "targets": "_all" }
        ],
        "responsive": true,
        "processing": true, 
        "bProcessing": true,
        "autoWidth": false, 
        "serverSide": true,
        "ajax": "url",
        "aaSorting": [2, 'desc'],

        "pagingType": "full_numbers",
        "language": {
            "sProcessing": '<i class="fas fa-asterisk fa-spin fa-6x fa-fw"></i> 
             <br>PROCESSING <br> Please wait...',
            },
           },
        dom:
            "<'row'<'col-sm-4'B><'col-sm-4 text-center'l><'col-sm-4'f>>" +
            "<'row'<'col-md-12'tr>>" +
            "<'row'<'col-md-7'i><'col-sm-5'p>>",

            buttons:[
            {
                extend: 'excelHtml5',
                text:'<i class="fas fa-file-excel fa-lg"></i>',
                titleAttr: 'Exportar a Excel (XLSX)',
                className:'btn btn-success',
                title:'DAWPs Data',
                action: newexportaction,
            },
            {
                text:'<i class="fas fa-sync"></i>',
                titleAttr: 'Limpiar filtro',
                className:'btn btn-secondary',
                action: function (e, dt, node, config) {
                        dt.search('').draw();
                        dt.order([2,'desc']).draw();
                }
            },
        ],

    }); 

现在,当我单击“导出到 excel”按钮时,通过这些修改,微调器会显示在表格主体中;根据我找到的信息,这仅在您使用服务器端时有效。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-08-25
    • 2012-12-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-12-05
    • 1970-01-01
    相关资源
    最近更新 更多