重新加载数据表jquery时处理指示器不起作用
Posted
技术标签:
【中文标题】重新加载数据表jquery时处理指示器不起作用【英文标题】：Processing indicator does not work when reloading datatable jquery 【发布时间】：2021-03-31 16:44:50 【问题描述】：我正在自定义数据表的加载指示器（使用微调器自定义 - 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] ,
className: "align-left", "targets": [3] ,
className: "align-left", "targets": [4] ,
className: "align-center", "targets": [5] ,
className: "align-center", "targets": [6] ,
//Largura das Colunas
width: 10, targets: 0 ,
width: 130, targets: 1 ,
width: 10, targets: 2 ,
width: 10, targets: 3 ,
width: 220, targets: 4 ,
width: 10, targets: 5 ,
width: 10, 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, type, item)
return item.financeiroTipoDescricao;
,
data: 'NumeroDocumento',
title: 'Número do Doc.',
autoWidth: true,
render: function (data, type, item)
return item.numeroDocumento;
,
data: 'ValorDocumento',
title: 'Valor do Doc.',
autoWidth: true,
render: function (data, type, item)
const value = parseFloat(item.valorDocumento);
if (!value) return 0;
return "R$ " + value.toLocaleString('pt-br', minimumFractionDigits: 2 );
,
data: 'NomeRazao',
title: 'Cliente/Fornecedor',
autoWidth: true,
render: function (data, type, item)
return item.nomeRazao;
,
data: 'FinanceiroSituacaoDescricao',
title: 'Situação',
autoWidth: true,
render: function (data, type, item)
return item.financeiroSituacaoDescricao;
,
"render": function (data, type, full, 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>
Spinner-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,174,239,.15);
border-bottom: 6px solid rgba(0,174,239,.15);
border-top: 6px solid rgba(0,174,239,.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();
);
【问题讨论】：
如何重新加载数据表？ 我更新了帖子...我正在从一个按钮更新。 尝试在全局范围内设置这个变量 var table = $('#dtFinanceiroIndex').DataTable();然后尝试 table.ajax.reload();在填充表之前，您可能还需要在 load_dtFinanceiroIndex 函数顶部的这行代码。 table.destroy(); 它不起作用@jqueryHtmlCSS ...奇怪的是，如果我将“处理”参数更改为true，它会起作用，但就我而言，它需要设置为false，因为我正在使用微调器对其进行自定义。 【参考方案1】：根据数据表论坛https://datatables.net/forums/discussion/39641/processing-events的帮助，我通过验证数据表事件“processing.dt”设法解决了这个问题。
解决方案：
table.on('processing.dt', function (e, settings, processing)
if (processing)
startLoadGlobal(SPINNER_PESQUISANDO_REGISTROS);
else
stopLoadGlobal();
);
【讨论】：
以上是关于重新加载数据表jquery时处理指示器不起作用的主要内容，如果未能解决你的问题，请参考以下文章
自定义 CollectionView 布局重新加载数据不起作用