0
In the code below, how I can recover query parameters after clicking on the pagination?
When the user informs the query parameters contract number and/or status and clicks on query, the code below makes the query normally through the form Submit ajax_form and mounts the pagination normally.
When I click on the next number in the pagination, it tries to execute the function consultarContratosPaginacao. Here I can’t recover the query parameters that were passed through the form Submit ajax_form.
I need this because if not the next page of the pagination presents different information from the query filter.
var numitens = 10; // quantidade de itens a ser mostrado por página
var pagina = 1;
jQuery(document).ready(function () {
jQuery('#ajax_form').submit(function () {
var dados = jQuery(this).serialize();
var numeroContrato = $(
'#numeroContrato').val();
var statusConsulta = $(
"#status option:selected")
.val();
// alert (statusConsulta);
var itens = "";
jQuery.ajax({
type: "POST",
url: "controle/controle.php",
cache: false,
dataType: "json",
data: dados,
beforeSend: function (op) {
$("h2").html('<img src="img/ajax-loader.gif" />'); // Carregando
},
error: function () {
$("h2").html("Há algum problema com a fonte de dados");
$("#minhaTabela tbody").html("");
},
success: function (data) {
if (data[0].erro) {
$("h2").html(data[0].erro);
$("#minhaTabela tbody").html("");
} else {
var tamanhoPagina = 10;
var pagina = 0;
// Laço para criar
// linhas da tabela
for (var i = pagina * tamanhoPagina; i < data.length && i < (pagina + 1) * tamanhoPagina; i++) {
var dataInicial = change(data[i].DT_INICIAL);
var dataFinal = change(data[i].DT_FINAL);
var status = "";
if (data[i].CS_STATUS == "A") {
status = "Ativo";
} else {
if (data[i].CS_STATUS == "I") {
status = "Inativo";
}
}
itens += "<tr>";
itens += "<td>" + data[i].ID_CONTRATO + "</td>";
itens += "<td>" + data[i].NU_CONTRATO + "</td>";
itens += "<td>" + dataInicial + "</td>";
itens += "<td>" + dataFinal + "</td>";
itens += "<td>" + data[i].VL_PF + "</td>";
itens += "<td>" + data[i].QTD_PF_CONTRATADO + "</td>";
itens += "<td>" + status + "</td>";
itens += "<td>" + "<a onClick='alterarContrato(" + data[i].ID_CONTRATO + ")' id='alterar'><i class='icon-pencil'></i></a> | <a onClick='excluirContrato(" + data[i].ID_CONTRATO + ")' id='excluir'><i class='icon-remove'></a>" + "</td>";
itens += "</tr>";
}
$("#minhaTabela tbody").html("");
// Preencher a
// Tabela
$("#minhaTabela tbody").append(itens);
// Limpar Status de
// Carregando
$("h2").html("");
// Chamando função
// que conta os
// itens e chama o
// paginador
contadorConsulta(
numeroContrato,
statusConsulta);
}
}
});
return false;
});
});
function consultarContratosPaginacao(pag, maximo) {
pagina = pag;
var itens = "",
url = "controle/controle.php";
var acao = "carregarContratos";
// Capturar Dados Usando Método AJAX do jQuery
$.ajax({
url: url,
cache: false,
// dataType : "json",
type: 'post',
data: {
'pagina': pag,
'maximo': maximo,
'acao': acao
},
beforeSend: function (op) {
$("h2").html('<img src="img/ajax-loader.gif" />'); // Carregando
},
error: function () {
$("h2").html(
"Há algum problema com a fonte de dados");
$("#minhaTabela tbody").html("");
},
success: function (dados) {
var data = JSON.parse(dados);
//alert(JSON.stringify(dados));
if (data[0].erro) {
$("h2").html(data[0].erro);
$("#minhaTabela tbody").html("");
} else {
// alert (retorno);
// alert(JSON.stringify(retorno));
var tamanhoPagina = 10;
var pagina = 0;
// Laço para criar linhas da tabela
for (var i = pagina * tamanhoPagina; i < data.length && i < (pagina + 1) * tamanhoPagina; i++) {
var dataInicial = change(data[i].DT_INICIAL);
var dataFinal = change(data[i].DT_FINAL);
var status = "";
if (data[i].CS_STATUS == "A") {
status = "Ativo";
} else {
if (data[i].CS_STATUS == "I") {
status = "Inativo";
}
}
itens += "<tr>";
itens += "<td>" + data[i].ID_CONTRATO + "</td>";
itens += "<td>" + data[i].NU_CONTRATO + "</td>";
itens += "<td>" + dataInicial + "</td>";
itens += "<td>" + dataFinal + "</td>";
itens += "<td>" + data[i].VL_PF + "</td>";
itens += "<td>" + data[i].QTD_PF_CONTRATADO + "</td>";
itens += "<td>" + status + "</td>";
itens += "<td>" + "<a onClick='alterarContrato(" + data[i].ID_CONTRATO + ")' id='alterar'><i class='icon-pencil'></i></a> | <a onClick='excluirContrato(" + data[i].ID_CONTRATO + ")' id='excluir'><i class='icon-remove'></a>" + "</td>";
itens += "</tr>";
}
$("#minhaTabela tbody").html("");
// Preencher a Tabela
$("#minhaTabela tbody").append(itens);
// Limpar Status de Carregando
$("h2").html("");
// Chamando função que conta os itens e chama o paginador
contador();
}
}
});
}
function contadorConsulta(numeroContrato, status) {
var itens = "",
url = "controle/controle.php";
var acao = "contarContratosConsulta";
// alert (status);
$.ajax({
url: url,
cache: false,
// dataType : "json",
type: 'post',
data: {
'acao': acao,
'numeroContrato': numeroContrato,
'status': status
},
beforeSend: function (op) {
$("h2").html('<img src="img/ajax-loader.gif" />'); // Carregando
},
error: function () {
$("h2").html("Há algum problema com a fonte de dados");
$("#minhaTabela tbody").html("");
},
success: function (dados) {
$("h2").html("");
paginadorConsulta(dados);
}
});
}
function paginadorConsulta(cont) {
if (cont <= numitens) {
$('#paginador').html('<ul><li>Apenas uma Página</li></ul>')
} else {
$('#paginador').html('<ul></ul>');
if (pagina != 1) {
$('#paginador ul').append(
'<li><a href="#" onclick="consultarContratosPaginacao(' + (pagina - 1) + ', ' + numitens + ')">Página Anterior</a></li>')
}
var qtdpaginas = Math.ceil(cont / numitens)
for (var i = 1; i <= qtdpaginas; i++) {
if (pagina == i) {
$('#paginador ul')
.append(
'<li class="active"><a href="#" onclick="consultarContratosPaginacao(' + i + ', ' + numitens + ')">' + i + '</a></li>')
} else {
$('#paginador ul').append(
'<li><a href="#" onclick="consultarContratosPaginacao(' + i + ', ' + numitens + ')">' + i + '</a></li>')
}
}
if (pagina != qtdpaginas) {
$('#paginador ul').append(
'<li><a href="#" onclick="consultarContratosPaginacao' + (pagina + 1) + ', ' + numitens + ')">Próxima Página</a></li>')
}
}
}
EDIT01:
Personal,
Solved the problem with your suggestions. I used global variables to save query parameters and solved everything with just one request. Thanks for the support!
var items = 10; // number of items to be shown per page var pagina = 1; var nContract = ""; var statusContract = ""; var qtyDadosConsult = "";
jQuery(Document) . ready( Function() { jQuery('#ajax_form') . Submit( Function() { var data = jQuery(this). serialize();
var numeroContrato = $(
'#numeroContrato').val();
var statusConsulta = $(
"#status option:selected")
.val();
// alert (statusConsulta);
var itens = "";
jQuery
.ajax({
type : "POST",
url : "controle/controle.php",
cache : false,
dataType : "json",
data : dados,
beforeSend : function(op) {
$("h2")
.html(
'<img src="img/ajax-loader.gif" />'); // Carregando
},
error : function() {
$("h2")
.html(
"Há algum problema com a fonte de dados");
$("#minhaTabela tbody")
.html("");
},
success : function(data) {
// alert
// (JSON.stringify(data));
if (data[0].erro) {
$("h2")
.html(
data[0].erro);
$(
"#minhaTabela tbody")
.html("");
} else {
var tamanhoPagina = 10;
var pagina = 0;
// Laço para criar
// linhas da tabela
for ( var i = pagina
* tamanhoPagina; i < data.length - 3
&& i < (pagina + 1)
* tamanhoPagina; i++) {
var dataInicial = change(data[i].DT_INICIAL);
var dataFinal = change(data[i].DT_FINAL);
var status = "";
if (data[i].CS_STATUS == "A") {
status = "Ativo";
} else {
if (data[i].CS_STATUS == "I") {
status = "Inativo";
}
}
itens += "<tr>";
itens += "<td>"
+ data[i].ID_CONTRATO
+ "</td>";
itens += "<td>"
+ data[i].NU_CONTRATO
+ "</td>";
itens += "<td>"
+ dataInicial
+ "</td>";
itens += "<td>"
+ dataFinal
+ "</td>";
itens += "<td>"
+ data[i].VL_PF
+ "</td>";
itens += "<td>"
+ data[i].QTD_PF_CONTRATADO
+ "</td>";
itens += "<td>"
+ status
+ "</td>";
itens += "<td>"
+ "<a onClick='alterarContrato("
+ data[i].ID_CONTRATO
+ ")' id='alterar'><i class='icon-pencil'></i></a> | <a onClick='excluirContrato("
+ data[i].ID_CONTRATO
+ ")' id='excluir'><i class='icon-remove'></a>"
+ "</td>";
itens += "</tr>";
}
// alert (itens);
$(
"#minhaTabela tbody")
.html("");
// Preencher a
// Tabela
$(
"#minhaTabela tbody")
.append(
itens);
// Limpar Status de
// Carregando
$("h2").html("");
// Chamando função
// de paginação e
// passando o número
// de linhas da
// consulta e os
// parâmetros de
// consulta
statusContrato = data[data.length - 1];
nContrato = data[data.length - 2];
qtdeDadosConsulta = data[data.length - 3];
//alert (statusContrato);
paginadorConsulta(data[data.length - 3]);
}
}
});
return false;
});
});
Function consultingContractsParking(pag, maximum) {
// variáveis
pagina = pag;
var itens = "", url = "controle/controle.php";
var acao = "consultarContrato";
// Capturar Dados Usando Método AJAX do jQuery
$
.ajax({
url : url,
cache : false,
// dataType : "json",
type : 'post',
data : {
'pagina' : pag,
'maximo' : maximo,
'numeroContrato' : nContrato,
'status' : statusContrato,
'acao' : acao
},
beforeSend : function(op) {
$("h2").html('<img src="img/ajax-loader.gif" />'); // Carregando
},
error : function() {
$("h2").html(
"Há algum problema com a fonte de dados");
$("#minhaTabela tbody").html("");
},
success : function(dados) {
var data = JSON.parse(dados);
if (data[0].erro) {
$("h2").html(data[0].erro);
$("#minhaTabela tbody").html("");
} else {
// alert (retorno);
// alert(JSON.stringify(retorno));
var tamanhoPagina = 10;
var pagina = 0;
// Laço para criar linhas da tabela
for ( var i = pagina * tamanhoPagina; i < data.length - 3
&& i < (pagina + 1) * tamanhoPagina; i++) {
var dataInicial = change(data[i].DT_INICIAL);
var dataFinal = change(data[i].DT_FINAL);
var status = "";
if(data[i].CS_STATUS == "A"){
status = "Ativo";
}else{
if(data[i].CS_STATUS == "I"){
status = "Inativo";
}
}
itens += "<tr>";
itens += "<td>" + data[i].ID_CONTRATO + "</td>";
itens += "<td>" + data[i].NU_CONTRATO + "</td>";
itens += "<td>" + dataInicial + "</td>";
itens += "<td>" + dataFinal + "</td>";
itens += "<td>" + data[i].VL_PF + "</td>";
itens += "<td>" + data[i].QTD_PF_CONTRATADO+ "</td>";
itens += "<td>" + status + "</td>";
itens += "<td>"
+ "<a onClick='alterarContrato("
+ data[i].ID_CONTRATO
+ ")' id='alterar'><i class='icon-pencil'></i></a> | <a onClick='excluirContrato("
+ data[i].ID_CONTRATO
+ ")' id='excluir'><i class='icon-remove'></a>"
+ "</td>";
itens += "</tr>";
}
$("#minhaTabela tbody").html("");
// Preencher a Tabela
$("#minhaTabela tbody").append(itens);
// Limpar Status de Carregando
$("h2").html("");
// Chamando o paginador
paginadorConsulta(qtdeDadosConsulta);
}
}
});
}
Function paginadorConsulta(cont) { if (cont <= items) { $('#pager'). html('
- Just a PÀGINA
Lucas, you’re making 3 AJAX calls in places for the same functionality. There is a term called DRY. "Don’t Repeat Yourself" that applies here. If you take a look at the code with that in mind I think you’ll be able to simplify a lot on your own. I’m not going to be able to help here right now, it’s a lot of code... but if no one will help me I’ll try to help again tomorrow.
– Sergio
Welcome to stackoverflow PT, the question is how to maintain query parameters whenever you advance page?
– Jorge B.
I will try to use the Hidden inputs and try to solve everything with a request only... Return soon with the result. Thanks for the support!
– Lucas Leonardo
Cool that you managed to solve the problem. You can put the solution as answer. Putting it in the question is not appropriate. Take the opportunity to format your code in the answer. The way it was put, it will not help much other people. You can accept your answer too.
– Maniero