At great cost, I was able to find ajax code for loading tables. It was necessary because there are more than 5 thousand records.
This is appearing error when doing the search:
DataTables warning (table id = 'table-schedule'): DataTables warning: JSON data from server could not be parsed. This is caused by a JSON formatting error.
Can anyone help with this? see my code:
<script src="assets/js/jquery.dataTables.js"></script>
<script src="assets/js/jquery.dataTables.bootstrap.js"></script>
<script type="text/javascript">
jQuery(function($) {
var oTable1 = $('#tabela-agenda').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "cadastroCarregaRegistros.php",
"aaSorting": [[ 0, "desc" ]],
"bAutoWidth" : false,
aoColumnDefs: [
{"aTargets": [ 0 ], "bSearchable": true, "bVisible": false },
{
"aTargets": [ 1 ],
"bSortable": false,
"mRender": function ( url, type, full ) {
return '<img src="/images/fotos/' + url + '" height="50" alt=""/>';
}
},
{"aTargets": [ 2 ] },
{"aTargets": [ 3 ] },
{"aTargets": [ 4 ] },
{"aTargets": [ 5 ] },
{
"aTargets": [ 6 ],
"bSortable": false,
"mRender": function ( status, type, full ) {
switch (status) {
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 "F":
return '<span class="label label-purple">Falta Pagar</span>';
break;
case "S":
return '<span class="label label-grey">Suspenso</span>';
break;
}
}
},
{
"aTargets": [ 7 ],
"bSortable": false,
"mData": 0,
"mData": 1,
"mData": 2,
"sWidth": "100px",
"sClass": "center",
"mRender": function ( data, type, val ) {
if (!val[2]){
return '<a class="blue" href="cadastroPerfil.php?id=' + val[0] + '&i=2a" title="Perfil"> <i class="icon-zoom-in bigger-130"></i></a> <a class="green" href="cadastroEditar.php?id=' + val[0] + '&i=2a" onclick="return hs.htmlExpand(this, {objectType: \'iframe\', width: 800, height:400 } )" title="Editar"> <i class="icon-pencil bigger-130"></i> </a> <a class="red delete-event" href="cadastroApagar.php?id=' + val[0] + '&foto=' + val[1] + '&i=2a" title="Apagar" data-title="Apagar" data-content="Deseja apagar esse membro?"> <i class="icon-trash bigger-130"></i></a></div>'
}else{
return '<a class="purple" href="carteirinha.php?badge=' + val[2] + ' " onclick="return hs.htmlExpand(this, {objectType: \'iframe\', width: 800, height:400 } )" title="Carteirinha"> <i class="icon-print bigger-130"></i> </a> <a class="blue" href="cadastroPerfil.php?id=' + val[0] + '&i=2a" title="Perfil"> <i class="icon-zoom-in bigger-130"></i></a> <a class="green" href="cadastroEditar.php?id=' + val[0] + '&i=2a" onclick="return hs.htmlExpand(this, {objectType: \'iframe\', width: 800, height:400 } )" title="Editar"> <i class="icon-pencil bigger-130"></i> </a> <a class="red delete-event" href="cadastroApagar.php?id=' + val[0] + '&foto=' + val[1] + '&i=2a" title="Apagar" data-title="Apagar" data-content="Deseja apagar esse membro?"> <i class="icon-trash bigger-130"></i></a></div>'
}
},
"bSortable": false
}
]
});
$('table th input:checkbox').on('click', function() {
var that = this;
$(this).closest('table').find('tr > td:first-child input:checkbox')
.each(function() {
this.checked = that.checked;
$(this).closest('tr').toggleClass('selected');
});
});
$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
function tooltip_placement(context, source) {
var $source = $(source);
var $parent = $source.closest('table')
var off1 = $parent.offset();
var w1 = $parent.width();
var off2 = $source.offset();
var w2 = $source.width();
if (parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2))
return 'right';
return 'left';
}
})
</script>