How to make a pagination with jquery and ajax?

Asked

Viewed 1,083 times

-1

I have a function that returns all customer registrations. But my question is how can I make a pagination with this code? THE ELEMENTS ARE CREATED DYNAMICALLY. HOW CAN I RESOLVE THIS?

    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);
      }
    });
  }
php javascript jquery

  • Possible duplicate of Paging with ajax

  • Possible duplicate of Paging with Jquery

  • Well I would like to know the logic how I could make this pagination because it creates the elements dynamically.

  • You can send along with the ajax request a control variable indicating the start record of the Current list. For example starting with zero and limiting the query to 20 records. When you have the page advanced, you will send the search starting from 20... or if you prefer to use https://datatables.net/ that makes everything easier....

1 answer

-1

The fact that the elements are created dynamically is no 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 entered the necessary control for paging:

$( 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.

;)

Browser other questions tagged php javascript jquery

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