Botão de paginação no HTML (escrito via jquery)

Alekym, sem problema,



[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) {

Boa tarde,

Não querendo ser rude, mas por favor poste o código que está dando erro.

Obrigado. :D

Olá Concurseiros


Venha participar do Aniversário do Maior Site de Rateios do Brasil,

O aniversário é do Concurseiros Unidos,
mas o presente quem ganha é você!

Desconto de 30% a 70% em todo o site!
Corre aproveitar antes que termine!
5541991115296

HTML - Somente onde carrega a tabela

<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>

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) {
$("#paginacaoUl").append('<li class="page-item"><button class="page-link" id="paginaAtual"> ' + pagAnt + ' </button></li>');
}
}
;
$("#paginacaoUl").append('<li class="page-item disabled"><button class="page-link" id="paginaAtual"> ' + dados.config[0].pagAtual + ' </button></li>');
for (var pagDep = parseFloat(dados.config[0].pagAtual) + 1; pagDep <= parseFloat(dados.config[0].pagAtual) + parseFloat(maxLinks); pagDep++) {
if (pagDep <= dados.config[0].quantPag) {
$("#paginacaoUl").append('<li class="page-item"><button class="page-link" id="paginaAtual"> ' + pagDep + ' </button></li>');
}
}
;
$("#paginacaoUl").append('<li class="page-item"><button class="page-link" id="ultimaPagina2"> Última <span><i class="fas fa-angle-double-right"></i></span></button></li>');
$("#paginacaoUl").append('</ul></nav>');

$('#numRegistros').removeClass('hidden');
voltarBtnPesquisa();
},
});
return false;
}
;
});
</script>

Alekym,

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

Alekym,

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.: