Botão de paginação no HTML (escrito via jquery)
17/10/2018
0
Estou carregando uma tabela através do jquery Ajax e no final carrega a paginação, mas os botões de paginação não fazem ação nenhuma, fiz um alert para teste e não aparece. O botão com o mesmo código escrito diretamente no HTML está chamando o alert. Alguém pode me ajudar?
Muito obrigado
Victor Pinto
Post mais votado
18/10/2018
<div class="col-12 p-0 list-inline hidden" id="numRegistros"> <div class="col-md-1 list-inline-item"> <h6>Mostrar:</h6> </div> <div class="col-md-1 col-sm-2 list-inline-item ml-0 mr-0 p-0"> <select onchange="javascript:carregarTabela(1, this.value);"class="form-control col-12 pt-0 pb-0" id="numeroRegistro" name="numeroRegistro" style="height: 28px;"> <option value="5" <?php echo ( $viewVar['numeroRegistro'] == 5 ? "selected" : "" ); ?>>5</option> <option value="10" <?php echo ( $viewVar['numeroRegistro'] == 10 ? "selected" : "" ); ?>>10</option> <option value="15" <?php echo ( $viewVar['numeroRegistro'] == 15 ? "selected" : "" ); ?>>15</option> <option value="25" <?php echo ( $viewVar['numeroRegistro'] == 25 ? "selected" : "" ); ?>>25</option> <option value="50" <?php echo ( $viewVar['numeroRegistro'] == 50 ? "selected" : "" ); ?>>50</option> </select> </div> <div class="col-md-2 list-inline-item pl-0"> <h6> por página</h6> </div> </div> <div id="enviando" class="text-center col-12"> </div> <div class="table-responsive" id="tabelaGeral"> </div> <div class="bd-example" id="paginacao"> </div>
[code=js]
<script>
$(document).ready(function () {
var URL = 'http://localhost/CursoDevMedia/';
var btnTexto = $("#pesquisarForn").html();
carregarTabela(1, 5);
$("#pesquisarForn").on('click', function () {
$("#pesquisarForn").html('Pesquisando <img src="' + URL + '/public/imagens/btn_carregando.gif" />');
$("#pesquisarForn").attr('disabled', true);
carregarTabela(1, 5);
});
$("#numeroRegistro").on('change', function () {
carregarTabela(1, $("#numeroRegistro").val());
});
$("#ultimaPagina").on('click', function () {
alert('cheguei');
carregarTabela(4, $("#numeroRegistro").val());
});
function voltarBtnPesquisa() {
$("#pesquisarForn").html(btnTexto);
$("#pesquisarForn").attr('disabled', false);
}
function carregarTabela(pagina, numPagina) {
var buscarFornecedor = $("#buscaFornecedor").val();
$("#tabelaGeral").empty(); //Limpando a tabela
$("#paginacao").empty(); //Limpando a paginacao
$.ajax({
dataType: "json",
type: "GET",
url: URL + 'fornecedor/buscarFornecedor/?action=&paginaSelecionada=' + pagina + '&numeroRegistro=' + numPagina + '&buscaFornecedor=' + buscarFornecedor,
error: function () {
$("#enviando").html('');
$("#tabelaGeral").append('<div class="text-center text-danger col-12"><span style="font-size:62px; font-weight: 100;">Ops!</span><br>Não foram encontrados lançamentos para essa pesquisa!</div>');
voltarBtnPesquisa();
},
beforeSend: function () {
$("#enviando").html('<img src="http://<?php echo APP_HOST; ?>/public/imagens/carregando"><br><span>Carregando...</span>');
},
success: function (dados) {
$("#enviando").html('');
$("#tabelaGeral").append('<table class="tablesorter table table-bordered table-hover"><thead class="tabela"><tr><th class="text-center" style="max-width: 80px; min-width: 75px;">Código</th><th class="text-center">Tipo</th><th class="">Nome/Razão Social</th><th class="text-center">CPF/CNPJ</th><th class="hidden-xs">Endereço</th><th class="hidden-xs text-center" style="max-width: 80px; min-width: 75px;">Número</th><th class="hidden-xs text-center"style="max-width: 80px; min-width: 75px;">Cidade</th><th class="text-center" style="max-width: 80px; min-width: 75px;">Estado</th><th class="text-center" style="min-width: 130px;">Ações</th></tr></thead><tbody id="dados_tabela"></tbody></table>');
//Preencher a tabela dos lançamentos para cada fornecedor Interno
$(dados.linha).each(function (y) {
if (dados.linha[y].tipo == "F") {
var tipo = "Pessoa Física";
} else {
var tipo = "Pessoa Jurídica";
}
$("#dados_tabela").append('<tr><td class="text-center">' + dados.linha[y].id + '</td><td class="text-center">' + tipo + '</td><td>' + dados.linha[y].nome + '</td><td class="text-center">' + dados.linha[y].cpf_cnpj + '</td><td>' + dados.linha[y].endereco + '</td><td class="text-center">' + dados.linha[y].numero + '</td><td class="text-center">' + dados.linha[y].cidade + '</td><td class="text-center">' + dados.linha[y].estado + '</td><td class="text-center"><a href="' + URL + 'fornecedor/visualizar/' + dados.linha[y].id + '" class="btn btn-primary btn-sm m-1" title="Visualizar os Detalhes do(a) Fornecedor(a) ' + dados.linha[y].nome + '"><span><i class="fas fa-eye"></i></span></a><a href="' + URL + 'fornecedor/edicao/' + dados.linha[y].id + '" class="btn btn-warning btn-sm m-1" title="Editar o(a) Fornecedor(a) ' + dados.linha[y].nome + '"><span><i class="far fa-edit"></i></span></a><a href="' + URL + 'fornecedor/exclusao/' + dados.linha[y].id + '" class="btn btn-danger btn-sm m-1" title="Excluir o(a) Fornecedor(a) ' + dados.linha[y].nome + '"><span><i class="far fa-trash-alt"></i></span></a></td></tr>');
});
$("#tabelaGeral").append('</tbody>');
//configurar a paginação da tabela
var maxLinks = 2;
$("#paginacao").append('<nav aria-label="Page navigation example"><ul id="paginacaoUl" class="pagination justify-content-center">');
$("#paginacaoUl").append('<li class="page-item"><button class="page-link" id="primeiraPagina"><span><i class="fas fa-angle-double-left"></i></span> Primeira </button></li>');
for (var pagAnt = dados.config[0].pagAtual - maxLinks; pagAnt <= dados.config[0].pagAtual - 1; pagAnt++) {
if (pagAnt >= 1) {
Victor Pinto
Mais Posts
17/10/2018
Alex William
Não querendo ser rude, mas por favor poste o código que está dando erro.
Obrigado. :D
18/10/2018
Victor Pinto
Desculpa, mas eh a primeira vez que uso o fórum e depois que eu vi a opção da tag para enviar o código, então acabei enviando duas vezes.
Desde já obrigado
19/10/2018
Victor Pinto
Descobri o problema:
Todas as vezes que usar o append ou prepend na hora do comando "onClick" é necessário especificar a classe ou id do botão que foi criado, pois os elementos adicionados de forma dinâmica na página não estão no DOM.
Em cada botão da página eu coloquei como value a página.
Ex.:
$(document).on("click", '.page-item button', function(){ carregarTabela(this.value, $("#numeroRegistro").val()); }
Clique aqui para fazer login e interagir na Comunidade :)