Tenho um formulário onde tem uma busca interna e uma paginação em Jquery e PHP. O resultado final é esse:
Está funcionando corretamente a paginação, porém quando digito o nome do usuário, o valor cheg nulo no jquery. Como posso pegar o valor digitado pelo jquery no campo de busca e implementar no código abaixo:
Campo de busca:
<form class="" action="#!" method="post">
<div class="input-group">
<input type="text" name="Usuario" class="form-control" placeholder="Buscar por nome" id="usuario" aria-label="Buscar por nome">
<div class="input-group-prepend">
<button type="submit" class="input-group-text" style="cursor: pointer"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
<span id="conteudo"></span>
Jquery
<script>
var qnt_result_pg = 10;
var pagina = 1;
var busca = $("#usuario").val();
$(document).ready(function () {
listar_usuario(pagina, qnt_result_pg, busca);
});
function listar_usuario(pagina, qnt_result_pg, busca){
var dados = {
pagina: pagina,
busca: busca,
qnt_result_pg: qnt_result_pg
}
$.post('listar-pagamentos-pendentes.php', dados , function(retorna){
$("#conteudo").html(retorna);
});
}
</script>
PHP (listar-pagamentos-pendentes.php)
$pagina = $_POST['pagina'];
$qnt_result_pg = $_POST['qnt_result_pg'];
$busca = $_POST["busca"];
echo $metodos->listarPendentes($pagina,$qnt_result_pg,$busca);
Entendo que tenho que pegar o clique do botão da busca, mas não estou sabendo implementar no código acima sem impactar na paginação. Gostaria de ressaltar que o problema não está no PHP e sim no Jquery, pois não estou conseguindo pegar o valor digitado no campo de busca e jogar para dentro da página listar-pagamentos-pendentes.php onde faço a paginação.