How to recover query parameters after clicking on pagination

Asked

Viewed 1,377 times

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

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&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 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&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 <= items) { $('#pager'). html('

  • Just a PÀGINA
') } Else { $('#pager'). html('
    '); if (page != 1) { $('#pager ul'). append( '
  • P¡gina Anterior
  • ') } var qtdpaginas = Math.Ceil(cont / numitems) for ( var i = 1; i <= qtdpagines; i++) { if (page == i) { $('#pager ul') . append( '' + i + '') } Else { $('#pager ul'). append( '
  • ' + i + '
  • ') } } if (page != qtdpaginas) { $('#pager ul'). append( '
  • Next monthP¡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.

    • Welcome to stackoverflow PT, the question is how to maintain query parameters whenever you advance page?

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

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

    2 answers

    1

    There is a term called DRY. "Don’t Repeat Yourself" that applies here.

    I fully agree with Sergio.

    1) Better organize your code. Spend some time thinking about how to write it, deform it to be compact and have no redundancies. The logic that receives the result of the Ajax call must be modularized into a function, which can be used at different points.

    2) Use jQuery("#id-do-your-form"). serialize() to retrieve the data in any part of the code. This way you can recover the filters elsewhere than in Ubmit, and send them again when a click occurs on a page.

    0

    If I understood what you want right, I would tell you to use Hidden inputs to store the data you need to use between a request and another, so you can recover it whenever you need it.

    Browser other questions tagged

    You are not signed in. Login or sign up in order to post.