How to do a paging with jquery and ajax?

Navigation
0

I have a function that returns all customer records. But my question is how can I do a paging with this code? THE ELEMENTS ARE CREATED DYNAMICALLY. HOW CAN I RESOLVE THAT? 

    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);
      }
    });
  }
    
asked by anonymous 05.10.2017 / 20:31

1 answer

0

The fact that the elements are created dynamically does not have a problem. What you need is a static structure on the page that will serve as a container for these elements.

In the solution below I used bootstrap and JQuery.

I suggest, then, the following:

                                                 

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

In the CUSTOM.js file I have inserted the necessary pagination control: 

$( 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;
    });
});

In the CUSTOM.css file: 

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;
}

What you need to do now is just create the elements using the pages as containers.

;)

    
05.10.2017 / 21:29
Position absolute values work for chrome and firefox? Update a CSV line without having to go through it all C #