重新加载数据表 jquery

如何解决重新加载数据表 jquery

我正在自定义数据表的加载指示器（使用微调器自定义 - startLoadGlobal (SPINNER_DATA_TABLE_FINANCEIRO_CARREGAR_REGISTROS)） jquery 在我第一次加载数据表时可以正常工作。当我重新加载数据表时，微调器不再工作，因为数据表似乎没有触发处理机制。 就我而言，“处理”参数应始终设置为 false，以免妨碍自定义。

有人知道如何帮助我吗？

谢谢:)

数据表：

function load_dtFinanceiroIndex() {
    var table = $("#dtFinanceiroIndex").DataTable({
        "info": true,"searching": true,"processing": false,// for show progress bar
        "serverSide": true,// for process server side
        "filter": true,// this is for disable filter (search Box)
        "orderMulti": false,// for disable multiple column at once
        "ordering": true,//Ativar/Desativar Ordenação de colunas 
        "order": [[1,"asc"]],//Ordenar da segunda coluna em diante para não atrapalhar a coluna [0] da seleção
        "ajax": {
            "url": '/financeiro-gerenciar/getFinanceiro',"data": function (d) {
                var formdata = $("#frm-pesquisa-avancada").serializeArray();
                var data = {};
                $(formdata).each(function (index,obj) {
                    data[obj.name] = obj.value;
                });

                d.financeiroPesquisaAvancadaviewmodel = data;

            },"type": "POST","datatype": "json"
        },"columnDefs": [
            //Estilos Das Colunas
            { className: "align-center","targets": [0] },{ className: "align-center","targets": [1] },{ className: "align-left","targets": [2] },"targets": [3] },"targets": [4] },"targets": [5] },"targets": [6] },//Largura das Colunas
            { width: 10,targets: 0 },{ width: 130,targets: 1 },{ width: 10,targets: 2 },targets: 3 },{ width: 220,targets: 4 },targets: 5 },targets: 6 },{ "orderable": false,"targets": 0 }
        ],"columns": [
            {
                "render": function (data,type,full,Meta) {
                    return '<td><span class="checkBox-custom checkBox-default"><input class="selectable-item" type="checkBox" id="' + full.id + '" ><label></label></span></td>';
                }
            },{
                data: 'FinanceiroTipodescricao',title: 'Tipo',autoWidth: true,render: function (data,item) {
                    return item.financeiroTipodescricao;
                }
            },{
                data: 'Numerodocumento',title: 'Número do Doc.',item) {
                    return item.numerodocumento;
                }
            },{
                data: 'ValorDocumento',title: 'Valor do Doc.',item) {
                    const value = parseFloat(item.valorDocumento);
                    if (!value) return 0;
                    return "R$ " + value.toLocaleString('pt-br',{ minimumFractionDigits: 2 });
                }
            },{
                data: 'NomeRazao',title: 'Cliente/Fornecedor',item) {
                    return item.nomeRazao;
                }
            },{
                data: 'FinanceiroSituacaoDescricao',title: 'Situação',item) {
                    return item.financeiroSituacaoDescricao;
                }
            },{
                "render": function (data,Meta) {
                    return '<div class="btn-group" aria-label="Button group with nested dropdown" role="group"><a data-id="' + full.id + '" class="btn btn-sm btn-icon btn-default btn-outline btn-editar-financeiro" title="Visualizar/Editar"><i class="icon wb-edit" aria-hidden="true"></i></a><a data-id="' + full.id + '" class="btn btn-sm btn-icon btn-default btn-outline btn-excluir-financeiro" title="Excluir"><i class="icon wb-trash" aria-hidden="true"></i></a><div class="btn-group" role="group"><a title="Mais Ações" class="btn btn-sm btn-outline btn-default dropdown-toggle" id="exampleGroupDrop2" data-toggle="dropdown" aria-expanded="false"><i class="icon wb-grid-4" aria-hidden="true"></i></a><div class="dropdown-menu" aria-labelledby="exampleGroupDrop2" role="menu"><a class="dropdown-item viewbutton" data-modal-financeiro-history="" data-id="' + full.id + '" role="menuitem"><i class="icon wb-time" aria-hidden="true"></i>Histórico</a></div></div></div>';
                }
            }
        ],"language": {
            "sEmptyTable": "Nenhum registro enconTrado","sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros","sInfoEmpty": "Mostrando 0 até 0 de 0 registros","sInfoFiltered": "(FilTrados de _MAX_ registros)","sInfoPostFix": "","sInfoThousands": ".","sLengthMenu": "_MENU_ resultados por página","sLoadingRecords": "Carregando...","sProcessing": startLoadGlobal(SPINNER_DATA_TABLE_FINANCEIRO_CARREGAR_REGISTROS),"sZeroRecords": "Nenhum registro enconTrado","sSearch": "Pesquisar","searchPlaceholder": "Digite algo...","oPaginate": {
                "sNext": "Próximo","sPrevIoUs": "Anterior","sFirst": "Primeiro","sLast": "Último"
            },"oAria": {
                "sSortAscending": ": Ordenar colunas de forma ascendente","sSortDescending": ": Ordenar colunas de forma descendente"
            }
        }
    });

    //Evento disparado depois que a table for desenhada
    table.on('draw',function () {
        stopLoadGlobal();
    });    
}

HTML：

<table id="dtFinanceiroIndex" class="table-responsive-xl table table-striped table-bordered center-header table-vcenter" cellspacing="0">
    <thead class="bg-blue-grey-100">
        <tr>
            <th>
                <span class="checkBox-custom checkBox-default">
                    <input id="dt-financeiro-selectable-all" class="selectable-all" type="checkBox">
                    <label></label>
                </span>
            </th>
            <th>
                Tipo de Controle Financeiro
            </th>
            <th>
                Núm. do Documento
            </th>
            <th>
                Valor do Documento
            </th>
            <th>
                Cliente/Fornecedor
            </th>
            <th>
                Situação
            </th>
            <th>
                Ações
            </th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

微调器-JS：

function startLoadGlobal(text) {
    if (text === '')
        text = "Carregando...";
    
    $("#spinner-global").text(text);
    $("#spinner-global").show();
}

function stopLoadGlobal() {
    $("#spinner-global").text('Carregando...');
    $("#spinner-global").hide();
}

微调 CSS：

#spinner-global {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #f5f5f5;
    /*z-index: 9999;*/
    z-index: 999999999;
    display: none;
    font-size: larger;
    text-align: center;
    line-height: 100vh;
    padding-top: 45px;
}


    #spinner-global::after {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 60px;
        height: 60px;
        margin: -36px auto 0 -36px;
        border-style: solid;
        border-color: black;
        border-top-color: transparent;
        border-width: 4px;
        border-radius: 50%;
        -webkit-animation: spin .8s linear infinite;
        animation: spin .8s linear infinite;
        -webkit-animation: rotation .6s infinite linear;
        -moz-animation: rotation .6s infinite linear;
        -o-animation: rotation .6s infinite linear;
        animation: rotation .6s infinite linear;
        border-left: 6px solid rgba(0,174,239,.15);
        border-right: 6px solid rgba(0,.15);
        border-bottom: 6px solid rgba(0,.15);
        border-top: 6px solid rgba(0,.8);
        border-radius: 50%;
    }

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(359deg);
    }
}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }

    to {
        -o-transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

重新加载数据表：

$("#btn-pesquisar-painel-financeiro").on("click",function (e) {
   $('#dtFinanceiroIndex').DataTable().ajax.reload();
});

解决方法

根据数据表论坛的帮助，我通过验证数据表事件“processing.dt”设法解决了该问题：https://datatables.net/forums/discussion/39641/processing-events。

解决方案：

table.on('processing.dt',function (e,settings,processing) {       
    if (processing) {
        startLoadGlobal(SPINNER_PESQUISANDO_REGISTROS);
    } else {
        stopLoadGlobal();
    }
});