-1

Tenho uma função que retorna todos os cadastros de clientes. Mas a minha dúvida é como que eu posso fazer uma paginação com este código? OS ELEMENTOS SÃO CRIADOS DINAMICAMENTE. COMO POSSO RESOLVER ISSO?

    function retorna_cliente ()
    {
      var id_cliente = "";
      var nome_cliente = "";
      var data_nascimento_cliente = "";
      var telefone_cliente = "";
      var celular_cliente = "";
      var cpf_cliente = "";
      var endereco_cliente = "";
      var email_cliente = "";
      var container_mostra_cliente = $('.mostra_clientes');
      var itemHTML = "";
      var mensagem_cliente = "Nenhum cliente encontrado";

    $.ajax({
      url: url_base + "clientes",
      type: 'GET',
      dataType: 'json',
      success: function (data)
      {
        if (data == 0)
        {
          $('.cliente-error-registro').css('display','block');
          $('.cliente-error-registro .mensagem-erro').html(mensagem_cliente);
        }
        else
        {
          itemHTML += "<table id='datatable-checkbox' class='table table-striped table-bordered bulk_action dataTable no-footer' role='grid' aria-describedby='datatable-checkbox_info'>";
          itemHTML += "<thead>";
          itemHTML += "<tr>";
          itemHTML += "<th>";
          itemHTML += "<th><input type='checkbox' id='check-all' class='flat'></th>";
          itemHTML += "</th>";
          itemHTML += "<th>Nome</th>";
          itemHTML += "<th>Data de Nascimento</th>";
          itemHTML += "<th>Telefone</th>";
          itemHTML += "<th>Celular</th>";
          itemHTML += "<th>Cpf</th>";
          itemHTML += "<th>Endereço</th>";
          itemHTML += "<th>Email</th>";
          itemHTML += "</tr>";
          itemHTML += "</thead>";

          data.forEach(function (item)
          {
            id_cliente = item.id;
            nome_cliente = item.nome;
            data_nascimento_cliente = formataDataSQL(item.data_nascimento);
            telefone_cliente = item.telefone;
            celular_cliente = item.celular;
            cpf_cliente = item.cpf;
            endereco_cliente = item.endereco;
            email_cliente = item.email;

            itemHTML += "<tbody>";
            itemHTML += "<tr>";
            itemHTML += "<td><th><input type='checkbox' value='" +  id_cliente + "' name='verifica_check_box[]' id='verifica_check_box' class='flat'/></th></td>";
            itemHTML += "<td>" + nome_cliente + "</td>";
            itemHTML += "<td>" + data_nascimento_cliente + "</td>";
            itemHTML += "<td>" + telefone_cliente + "</td>";
            itemHTML += "<td>" + celular_cliente + "</td>";
            itemHTML += "<td>" + cpf_cliente  + "</td>";
            itemHTML += "<td>" + endereco_cliente + "</td>";
            itemHTML += "<td>" + email_cliente  + "</td>";
            itemHTML += "</tr>";
            itemHTML += "</tbody>";
          });

          itemHTML += "</table>";
          container_mostra_cliente.append(itemHTML);
        }

      },
      error: function (XMLHttpRequest, textStatus, errorThrown)
      {
        console.log(data);
      }
    });
  }
4
  • Possível duplicata de Paginação com ajax Commented 5/10/2017 às 18:34
  • Possível duplicata de Paginação com Jquery Commented 5/10/2017 às 18:34
  • Bem eu gostaria de saber a lógica como que eu poderia fazer esta paginação pois ela cria os elementos dinamicamente. Commented 5/10/2017 às 18:37
  • Você pode enviar junto com a requisição ajax uma variável de controle indicando o registro de inicio da lista Atual. Por exemplo iniciando com zero e limitando a consulta a 20 registros. Quando mandar avançar de página, você vai enviar a busca iniciando do 20... ou se preferir usar datatables.net que deixa tudo mais fácil.... Commented 5/10/2017 às 18:47

1 Resposta 1

-1

O fato dos elementos serem criados dinamicamente não tem problema. O que você precisa é de uma estrutura estática na página que servirá como container para estes elementos.

Na solução abaixo utilizei bootstrap e JQuery.

Sugiro, então, o seguinte:

    <title>Test site</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom Fonts -->

    <!-- Theme CSS -->
    <link href="css/custom.css" rel="stylesheet">

    <!-- jQuery -->
    <script src="js/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Theme JavaScript -->
    <script src="js/custom.js"></script>

</head>
<body>

    <!-- Content Area -->
    <main>

        <!-- Page Header -->
        <header>
        </header>

        <div id="pagination">

            <div id="page1" class="custom-page collapse in">
                page1
            </div>

            <div id="page2" class="custom-page collapse">
                page2
            </div>

            <div id="page3" class="custom-page collapse">
                page3
            </div>

            <div id="page4" class="custom-page collapse">
                page4
            </div>              

        </div>
        <div id="commands" class="command">
            <a id="page_command">Change page</a>
        </div>


        <!-- Page Footer -->
        <footer>
        </footer>

    </main>
</body>

No arquivo CUSTOM.js inseri o controle necessário à paginação:

$( document ).ready(function() {
    var current_page = 1;
    var total_pages = $('#pagination').children('div').length;
    $('#page_command').on('click', function(){
        for (i=1;i<total_pages+1; i++){
            $("#page" + i).hide();
        }
        current_page++;
        $("#page" + current_page).slideDown(1000);
        if (current_page == total_pages)
            current_page = 0;
    });
});

No arquivo CUSTOM.css:

html, body{
    height:100%;
    width: 100%;
    position: relative;
    display: block;
    z-index: 0;
}
a{
    cursor: pointer;
}
.custom-page{
    width: 300px;
    height: 500px;
    border: 1px solid black;
    position: absolute;
    top: 0;
    left: 0;
    color: rgb(0,0,0);
    background-color: rgb(60,70,80);
}
.command{
    position: absolute;
    top:600px;

}
.hidden{
    display:none;
}

O que você precisa fazer agora é apenas criar os elementos usando as páginas como containers.

;)

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 .