How to retrieve query parameters after click paging

0

In the code below, how do I retrieve query parameters after paging?

When the user informs the query parameters of the contract number and / or status and clicks on query, the code below usually queries through the submit of form ajax_form and mounts the paging normally.

When I click the next number in pagination, it tries to execute the consultarContratosPaginacao function. Here I can not retrieve the query parameters that were passed through the submit of form ajax_form .

I need this because if not the next page of the page displays different information than 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 the query parameters and solved everything with just one request. Thanks for the support!

var numitens = 10; // number of items to display per page var page = 1; var nContract=""; var statusContract=""; var queryType="";

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 queryContratosPaginacao (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 paginator Query (cont) {     if (cont

asked by anonymous 13.05.2014 / 23:14

2 answers

1
  

There is a term called DRY. "Do not Repeat Yourself" that applies here.

I fully agree with Sergio.

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

2) Use jQuery ("# id-your-form"). serialize () to retrieve data anywhere in the code. That way you can retrieve the filters elsewhere than in the submit, and send them back when a page click occurs.

    
14.05.2014 / 23:49
0

If I understood correctly what you want, I would tell you to use Hidden inputs to store the data you need to use between one request and another, so you can retrieve them whenever you need them.

    
14.05.2014 / 04:17