0

No código abaixo, como consigo recuperar parâmetros de consulta após clique na paginação?

Quando o usuário informa os parâmetros de consulta número do contrato e/ou status e clica em consultar, o código abaixo faz a consulta normalmente através do submit do form ajax_form e monta a paginação normalmente.

Quando clico no próximo número na paginação, ela tenta executar a função consultarContratosPaginacao. Aqui não consigo recuperar os parâmetros de consulta que foram repassados através do submit do form ajax_form.

Preciso disso porque se não a próxima página da paginação apresenta informações diferentes das do filtro de consulta.

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&aacute; 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&aacute; 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&aacute; 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:

Pessoal,

Resolvido o problema com as sugestões de vocês. Utilizei variáveis globais para salvar os parâmetros de consulta e resolvi tudo com apenas uma requisição. Obrigado pelo apoio!

var numitens = 10; // quantidade de itens a ser mostrado por página var pagina = 1; var nContrato = ""; var statusContrato = ""; var qtdeDadosConsulta = "";

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&aacute; 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 consultarContratosPaginacao(pag, maximo) {

// 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&aacute; 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 <= numitens) { $('#paginador').html('

  • Apenas uma Página
') } else { $('#paginador').html('
    '); if (pagina != 1) { $('#paginador ul').append( '
  • Página Anterior
  • ') } var qtdpaginas = Math.ceil(cont / numitens) for ( var i = 1; i <= qtdpaginas; i++) { if (pagina == i) { $('#paginador ul') .append( '' + i + '') } else { $('#paginador ul').append( '
  • ' + i + '
  • ') } } if (pagina != qtdpaginas) { $('#paginador ul').append( '
  • Próxima Página
  • ') } } }

    4
    • Lucas, você está a fazer 3 chamadas AJAX em sitios para a mesma funcionalidade. Existe um termo chamado DRY. "Don't Repeat Yourself" que se aplica aqui. Se você der uma olhada ao código com isso em mente acho que vai conseguir sozinho simplificar bastante. Eu não vou conseguir ajudar aqui agora, é muito código... mas se ninguêm der uma ajuda eu tento ajudar de novo amanhã.
      – Sergio
      Commented 13/05/2014 às 21:54
    • Bem vindo ao stackoverflow PT, a questão é como manter os parâmetros de consulta sempre que avanças de página?
      – Jorge B.
      Commented 14/05/2014 às 7:56
    • Vou tentar utilizar os hidden inputs e tentar resolver tudo com uma requisição só... Retorno em breve com o resultado. Obrigado pelo apoio! Commented 14/05/2014 às 17:33
    • Legal que você conseguiu resolver o problema. Você pode colocar a solução como resposta. Colocar ela na pergunta não é adequado. Aproveite para formatar seu código na resposta. Da maneira como foi colocado, não vai ajudar muito outras pessoas. Você pode aceitar sua resposta também.
      – Maniero
      Commented 22/05/2014 às 2:22

    2 Respostas 2

    1

    Existe um termo chamado DRY. "Don't Repeat Yourself" que se aplica aqui.

    Concordo plenamente com Sergio.

    1) Organize melhor seu código. Gaste um tempo pensando em como escrevê-lo, deforma que ele seja compacto e não tenha redundâncias. A lógica que recebe u resultado da chamada Ajax deve ser modularizada em uma função, que poderá ser usada em diferentes pontos.

    2) Use jQuery("#id-do-seu-form").serialize() para recuperar os dados em qualquer parte do código. Dessa forma você pode recuperar os filtros em outra parte que não seja no submit, e enviá-los novamente quando ocorre um clique em uma página.

    0

    Se entendi direito o que você quer, eu diria para você usar Hidden inputs para armazenar os dados que você precisa usar entre uma requisição e outra, podendo assim recupera-los sempre que precisar.

    Você deve fazer log-in para responder a esta pergunta.

    Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .