Possuo uma base de dados com 5.985 registros. Estou usando o datatablesdataTables, mas ele demora muito para carregar com muitos registros. É
É possível melhorar esse carregamento de 5,985 registros?
<div class="row">
<div class="col-xs-12">
<div class="table-responsive">
<table id="tabela-agenda" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Foto</th>
<th>Badge</th>
<th>Nome</th>
<th>E-mail</th>
<th class="hidden-480">Telefone</th>
<th class="hidden-480">Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<td><div<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
<?php if ($row_rs['badge'] != ""){?>
<a class="purple" href="carteirinha.php?badge=<?php echo $row_rs['badge']; ?>" onclick="return hs.htmlExpand(this, {objectType: 'iframe', width: 800, height:400 } )" title="Carteirinha"> <i class="icon-print bigger-130"></i> </a>
<?php }?>
<a class="blue" href="cadastroPerfil.php?id=<?php echo $row_rs['ID']; ?>&i=2a" title="Perfil"> <i class="icon-zoom-in bigger-130"></i> </a>
<a class="green" href="cadastroEditar.php?id=<?php echo $row_rs['ID']; ?>&i=2a" title="Editar" onclick="return hs.htmlExpand(this, {objectType: 'iframe', width: 800, height: 600 } )"> <i class="icon-pencil bigger-130"></i> </a>
<a class="red delete-event" href="cadastroApagar.php?id=<?php echo $row_rs['ID']; ?>&foto=<?php echo $row_rs['foto']; ?>&i=2a" title="Apagar" data-title="Apagar" data-content="Deseja apagar esse membro?" onClick="return false;"> <i class="icon-trash bigger-130"></i> </a> </div>
<div class="visible-xs visible-sm hidden-md hidden-lg">
<div class="inline position-relative">
<button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown"> <i class="icon-caret-down icon-only bigger-120"></i> </button>
<ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
<li> <a href="#" class="tooltip-info" data-rel="tooltip" title="Ver"> <span class="blue"> <i class="icon-zoom-in bigger-120"></i> </span> </a> </li>
<li> <a href="#" class="tooltip-success" data-rel="tooltip" title="Editar"> <span class="green"> <i class="icon-edit bigger-120"></i> </span> </a> </li>
<li> <a href="#" class="tooltip-error" data-rel="tooltip" title="Apagar"> <span class="red"> <i class="icon-trash bigger-120"></i> </span> </a> </li>
</ul>
</div>
</div></td>div>
</tr>td>
</tbody>tr>
</tbody>
</table>
</div >div>
</div>
</div>
<script src="assets/js/jquery.dataTables.js"></script>
<script src="assets/js/jquery.dataTables.bootstrap.js"></script>
<script type="text/javascript">
var oTable1 = $('#tabela-agenda').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "cadastroCarregaRegistros.php",
columns: [
{
data: "foto", //Nome do campo no JSON, que contem a url da foto
render: function(value) {
return '<img src="/images/fotos/' + value + '" height="50" alt=""/>';
}
},
null,
null,
null,
null,
{
data: "status", //Nome do campo no JSON, retorna o status do cadastro
render: function(value) {
switch (value) {
case "N":
return '<span class="label label-warning">Aguardando aprovação</span>';
break;
case "A":
return '<span class="label label-success">Ativo</span>';
break;
case "V":
return '<span class="label label-danger">Vencido</span>';
break;
case "B":
return '<span class="label label-inverse">Banido</span>';
break;
case "FP":
return '<span class="label label-purple">Falta Pagar</span>';
break;
}
}
},
null
]
});
</script>