Faço uma consulta no banco de dados através do PHP que recebe os dados de um AJAX. (E depois retorna os dados da consulta para o AJAX)
Até ai tudo bem. O problema é que gostaria de realizar a paginação destes dados que retornam do AJAX. (São milhares de linhas)
O meu maior problema é criar esses botões, da imagem abaixo, para a paginação (Essa é uma imagem de uma página feita com o DataTables):
Não vejo uma lógica correta de como fazer a criação e exibição desses botões de acordo com a quantidade de linhas retornadas do MySQL.
Segue abaixo uma parte do meu código do AJAX, e do PHP.
function inserirFormulario(dados, select_de_filtro) {
$("div#loading-resultado-pesquisa").html("<img src='../_imagens/load2.gif' width='300px'>");
$("div#loading-resultado-pesquisa").show();
$.ajax({
//dataType: "json",
type: "POST",
data: dados.serialize(),
url: "../banco/banco-vision/pagina-controle-de-tarefas/interface-resultado-pesquisa.php",
cache: false,
}).done(function(data) {
var atividades = "";
$.each($.parseJSON(data), function(chave, valor) {
//FUNÇÃO PARA FORMATAR AS DATAS QUE VEM DO PHP
function dataAtualFormatada(parametro) {
if (parametro == null) {
parametro = "";
return parametro;
} else {
var data = new Date(parametro),
dia = data.getDate().toString(),
diaF = (dia.length == 1) ? '0' + dia : dia,
mes = (data.getMonth() + 1).toString(), //+1 pois no getMonth Janeiro começa com zero.
mesF = (mes.length == 1) ? '0' + mes : mes,
anoF = data.getFullYear();
return diaF + "/" + mesF + "/" + anoF;
}
}
var vencimento = dataAtualFormatada(valor.DT_VENCIMENTO);
var inicio = dataAtualFormatada(valor.DT_INICIO);
var fim = dataAtualFormatada(valor.DT_FIM);
//CRIANDO AS LINHAS COM OS TD DA TABELA QUE SÃO O RESULTADO NA CONSULTA AO BANCO
atividades += '<tr class="' + valor.codigo + '" name="' + valor.STATUS + '">';
atividades += '<td nowrap>' + valor.RESPONSAVEL + '</td>';
atividades += '<td nowrap >' + valor.COD + '</td>';
atividades += '<td nowrap>' + (valor.EMPRESAS.substring(0, 40)) + '</td>';
atividades += '<td nowrap >' + valor.TRIBUTACAO + '</td>';
atividades += '<td nowrap>' + (valor.TIPO_ATIVIDADE.substring(0, 50)) + '</td>';
atividades += '<td ">' + vencimento + '</td>';
if (valor.STATUS == "INICIADO") {
atividades += '<td style="padding:0;text-align:left;" class="" ><button type="button" class="btn ' + valor.STATUS + ' reabriratividade colocarstandby justificar btn-info css-botao-lista" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
} else if (valor.STATUS == "CONCLUIDO") {
atividades += '<td style="padding:0;text-align:left;" class="" ><button type="button" class="btn ' + valor.STATUS + ' reabriratividade colocarstandby justificar btn-success css-botao-lista" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
} else if (valor.STATUS == "CONCLUIDO_VENCIDO") {
atividades += '<td style="padding:0;text-align:left;" class="" ><button type="button" class="btn ' + valor.STATUS + ' reabriratividade colocarstandby justificar btn-dark css-botao-lista" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
} else if (valor.STATUS == "VENCIDO") {
atividades += '<td style="padding:0;text-align:left;width:100%" class="" ><button type="button" class="btn ' + valor.STATUS + ' reabriratividade colocarstandby justificar btn-danger css-botao-lista" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
} else if (valor.STATUS == "PENDENTE") {
atividades += '<td style="padding:0;text-align:left;" class="" ><button type="button" class="btn ' + valor.STATUS + ' reabriratividade colocarstandby justificar btn-primary css-botao-lista" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
} else if (valor.STATUS == "INICIADO_VENCIDO") {
atividades += '<td style="padding:0;text-align:left;" class="" ><button type="button" class="btn ' + valor.STATUS + ' reabriratividade colocarstandby justificar btn-warning css-botao-lista" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
}
//botão stand_by do status
else if (valor.STATUS == "STAND_BY") {
atividades += '<td style="padding:0;text-align:left;" class="" ><button type="button" class="btn ' + valor.STATUS + ' justificar btn-secondary css-botao-lista" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
}
//botão inserir detalhes
atividades += '<td style="padding:0;text-align:center;" ><button type="button" class="btn btn-primary botao-detalhes css-botao-list-no-width" <a data-toggle="modal" data-target="#modal-observacoes"><span class="text-light"><i class="fas fa-comment-dots"></i></span></a></button></td>';
//botão reabrir atividade coluna
atividades += '<td style="padding:0;text-align:center;" class=""><button data-placement="botton" title="Voltar o Status da atividade para o estado anterior." type="button" class="btn btn-secondary reabrir-atividade-coluna css-botao-list-no-width" name="' + valor.STATUS + '" value="' + valor.codigo + '"><span><i class="fas fa-history"></i></span></button></td>';
//botão stand by da coluna
atividades += '<td style="padding:0;text-align:center;" class=""><button data-placement="bottom" title="Use esta opção caso a atividade não possa ser iniciada ou concluida, devido a algum fator externo como ausência de documentação necessária dentre outros, quando a atividade for concluida fora do prazo estando em STAND BY quando o funcionario clicar na atividade novamente, o funcionário não será prejudicado, a atividade será marcada como concluída." type="button" class="btn btn-secondary stand-by-coluna css-botao-list-no-width" id="' + valor.codigo + '" value="' + valor.COD + '"><i class="fas fa-exclamation-circle"></i></button></td>';
//Botão Remover linha
atividades += '<td style="padding:0;text-align:center;" class=""><button data-placement="top" title="Clique aqui para remover esta atividade, esta ação não apagará as atividades anteriores nem as futuras." type="button" class="btn btn-secondary botao-remover css-botao-list-no-width"><i class="fas fa-trash-alt"></i></button></td>';
//Botão Justificar
atividades += '<td style="padding:0;text-align:center;" class=" css-botao-list-no-width"><button data-placement="top" title="A ferramenta de justificar deve ser usada, quando por algum problema alheio ao funcionário a atividade foi concluída fora do prazo de vencimento, ela será marcada como JUSTIFICADO e STATUS CONCLUIDO, não gerando prejuizo ao funcionário." type="button" class="btn btn-success botao-justificar css-botao-list-no-width"><i class="fas fa-check-circle"></i></button></td>';
atividades += '<td style="padding:0;text-align:center;" class="th-ocultar-responsivo-tbody td-padding"><button type="button" data-toggle="tooltip" data-placement="top" title="Clique aqui para ver o arquivo" class="btn btn-secondary css-ver-arquivo botao-ver-arquivo ' + valor.codigo + '" value="' + valor.COD + '"><a class="text-light" href="#" data-toggle="modal" data-target="#modal-lista-arquivos-atividade" style="text-decoration:none"><span><i class="far fa-eye"></i></span></a></button></td>';
atividades += '</tr>';
});
$('#registros-atividades').html(atividades);
$("div#loading-resultado-pesquisa").hide();
}).fail(function() {
}).always(function() {
});
}
<?php
$pesquisar = "SELECT COD, RESPONSAVEL, EMPRESAS, TRIBUTACAO, TIPO_ATIVIDADE, STATUS, DETALHES, FEEDBACK, DT_VENCIMENTO, DT_INICIO, DT_FIM, codigo, possui_arquivo FROM tbl_atividades";
$pesquisar .= " WHERE COD like '%$cod' AND EMPRESAS like '%$empresas' AND EMPRESA_ORIGEM like '%$user_empresa_origem_click_dashboard%' AND TRIBUTACAO like '%$tributacao' AND TIPO_ATIVIDADE like '%$atividade' AND departamento like '%$departamento_click_dashboard%' AND STATUS = 'STAND_BY' $variavel LIMIT $limit";
$operacao_consulta = mysqli_query($conecta, $pesquisar) or die("Erro na conexão com banco de dados");
$retorno = array();
while($linha = mysqli_fetch_object($operacao_consulta))
{
$retorno[] = $linha;
}
echo json_encode($retorno);
break;
}
?>
Segue abaixo uma imagem de como o sistema está agora.
Já procurei em diversos sites e fórum e não consegui algo claro. Talvez por eu nunca ter feito algo do tipo (com paginação). Encontro muito conteúdo, porém com php puro.
Desde já agradeço a atenção. Obrigado!