When loading the page containing the data in the dataTable, the following fault occurs: first, all data is loaded into the dataTable and visible to the user; after a few seconds this data is displayed correctly (grouped by 5 records per page).
The following images show the problem that is occurring.
Image 1: When the page loads all data from the dataTable is displayed (this is a failure).
Image2:AfterafewsecondsthedataTabledataisdisplayedcorrectly.Home.
Doubt:Howtofixdelaywhenuploadingdata?
JavaScriptfiletosetupdataTable:IhaveenteredthevariabledeferLoadingandassignsavalueof0,buttheerrorhasnotbeencorrected.
$(document).ready(function(){vartitulo=$('.page-title').text();vartable=$('.dataTable').DataTable({language:{processing:"Traitement en cours...",
search: "Pesquisar :",
lengthMenu: "Visualizar  _MENU_  registros",
info: "Mostrando _START_ à _END_ de _TOTAL_ registros",
infoEmpty: "",
infoFiltered: "(Filtrados de _MAX_ registros ao total)",
infoPostFix: "",
loadingRecords: "Chargement en cours...",
zeroRecords: "Aucun élément à afficher",
emptyTable: "Não há registros com as informações.",
paginate: {
first: "Primeira",
previous: "Anterior",
next: "Próxima",
last: "Última"
},
aria: {
sortAscending: ": activer pour trier la colonne par ordre croissant",
sortDescending: ": activer pour trier la colonne par ordre décroissant"
}
},
info: false,
lengthMenu: [[5, 10, 25, -1], [5, 10, 25, "All"]],
dom: '<"top"B>rt<"row"><"col-md-12"><"col-md-4"fl><"col-md-3"i><"col-md-5"p>',
searching: false,
deferLoading: 0,
buttons: [
{
extend: 'print',
text: '<i class="fa fa-print" aria-hidden="true"></i>',
title: titulo,
titleAttr: 'Imprimir',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'copy',
text: '<i class="fa fa-files-o" aria-hidden="true"></i>',
title: titulo,
titleAttr: 'Copiar',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excel',
text: '<i class="fa fa-file-excel-o" aria-hidden="true"></i>',
title: titulo,
titleAttr: 'Excel',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdf',
text: '<i class="fa fa-file-pdf-o" aria-hidden="true"></i>',
title: titulo,
titleAttr: 'PDF',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'colvis',
text: '<i class="fa fa-eye" aria-hidden="true"></i>',
title: titulo,
titleAttr: 'Visibilidade das colunas',
exportOptions: {
columns: ':visible'
}
}
]
// table.buttons().container().appendTo( '#teste22' );
});
});
Library references dataTable:
<!--Inicio da biblioteca DataTables-->
<script src="{{asset('js/datatables/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('js/datatables/buttons.flash.min.js')}}"></script>
<script src="{{asset('js/datatables/jszip.min.js')}}"></script>
<script src="{{asset('js/datatables/pdfmake.min.js')}}"></script>
<script src="{{asset('js/datatables/vfs_fonts.js')}}"></script>
<script src="{{asset('js/datatables/buttons.html5.min.js')}}"></script>
<script src="{{asset('js/datatables/buttons.print.min.js')}}"></script>
<script src="{{asset('js/datatables/buttons.colVis.min.js')}}"></script>
<!--Fim da biblioteca DataTables -->
<script src="{{asset('js/app-js.js')}}"></script>
<script src="{{asset('js/pages-js/projeto/projeto-index.js')}}"></script>
Code of the html page containing the dataTable:
<div class="box-body">
<div class="row row-lg">
<div class="col-md-12">
<!-- Example Basic -->
<div class="example-wrap">
<div class="example table-responsive" >
@if(empty($projetos))
<div>Você não tem nenhum projeto cadastrado.</div>
@else
<table id="userTable" class="table table-hover table-bordered table-striped table-responsive toggle-arrow-tiny dataTable">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Tipo de Processo</th>
<th>Data de Inicio</th>
<th>Data de Fim</th>
<th class="text-center"></th>
</tr>
</thead>
<tbody id="bodyUsers">
@foreach($projetos as $projeto)
<tr>
<td>{{$projeto->id}}</td>
<td>{{$projeto->nome_projeto}}</td>
<td>{{$projeto->tipo_processo}}</td>
<td>{{$projeto->dt_inicio}}</td>
<td>{{$projeto->dt_fim}}</td>
<td class="text-center">
@if($permissoesPerfil->update == 1)
<a class="btn btn-xs btn-icon btn-primary btn-round waves-effect waves-light waves-round"
title="Editar" href="{{URL::to('/projetos/edita', $projeto->id)}}">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
@endif
 
@if($permissoesPerfil->view == 1)
<a class="btn btn-xs btn-icon btn-success btn-round waves-effect waves-light waves-round btnView "
data-target="#exampleModalSuccess" data-toggle="modal" title="Visualizar"
data-id="{{$projeto->id}}" data-processo="{{$projeto->tipo_processo}}" data-nome="{{$projeto->nome_projeto}}"
data-datainicio="{{$projeto->dt_inicio}}" data-datafim="{{$projeto->dt_fim}}">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
@endif
 
@if($permissoesPerfil->delete == 1)
<a data-target="#modalExclusao" data-toggle="modal" id="btnExcluir" data-id="{{$projeto->id}}" data-nome="{{$projeto->nome_projeto}}"
class="btn btn-xs btn-icon btn-danger btn-round waves-effect waves-light waves-round" title="Excluir">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</a>
@endif
</td>
</tr>
@endforeach
</tbody>
</table>
@endif
</div>
</div>
</div>
</div>
</div>
<!-- End Panel Form Elements -->