Create CRUD pagination with Jquery and Ajax

Question

Create CRUD pagination with Jquery and Ajax

Navigation

#1 by (0 votes)

-1

I have this code in HTML / JavaScript / Jquery and I need to create a paging with the elements of the server. The page displayed the elements of 5 out of 5, I wanted to know how to go to the next pages and go back.

<!DOCTYPE html>

Customers

Nome Cliente: <input type="text" id="id1">
<br><br>
Uf: <input type="text" id="id2">
<br><br>
Renda Mensal: <input type="text" id="id3">

<br><br>

<button type="button" id="id4">Novo/Alterar</button>

<br><br>

<table id="demo"></table>

<script type="text/javascript">

    $(document).ready(function(){

            $('#id4').click(function()
            {
                $.ajax
                ({
                      type: 'get',
                      datatype: 'json',
                      data:'num_rec_per_page=5',
                      url:'https://clienteweb2017.000webhostapp.com/crud_ajax_json/getDadosClientes.php',
                      success: function(retorno)
                      {

                          var dados = JSON.parse(retorno);
                          var linhas = "";

                          $.each(dados.data,function(key,value)
                          {

                              linhas += "<tr><td>"+ value.id +"</td> <td>"+ value.nome + "</td> <td>"+ value.uf +"</td> <td>"+value.rendamensal +"</td>"+"<td> <button id='editar'>Editar</button> </td> "+" <td> <button id='apagar'>Apagar</button> </td> </tr>";
                          });

                          $("#demo").html(linhas);  
                      }
                   })
            })

            $('#id4').click(function()
            {

                var nome = $('#id1').val();
                var uf = $('#id2').val();
                var rm = $('#id3').val();

                $.ajax
                ({
                      type: 'get',
                      datatype: 'json',
                      data: 'nome='+nome+'&uf='+uf+'&rendamensal='+rm,
                      url:'https://clienteweb2017.000webhostapp.com/crud_ajax_json/createCliente.php',
                      success: function(data)
                      {
                          console.log(data);
                      }
                })

            });

            $("body").on("click","#editar",function()
            {
                var nome = $('#id1').val();
                var uf = $('#id2').val();
                var rm = $('#id3').val();
                var id= $(this).parent().siblings().eq(0).text();

                $.ajax
                ({
                      type: 'get',
                      datatype: 'json',
                      data: 'id='+ id +'&nome='+nome+'&uf='+uf+'&rendamensal='+ rm,
                      url:'https://clienteweb2017.000webhostapp.com/crud_ajax_json/updateCliente.php',
                      success: function(data1)
                      {
                          console.log(data1);
                      }
                })

            });

            $("body").on("click","#apagar",function()
            {
                var id= $(this).parent().siblings().eq(0).text();
                $.ajax
                ({
                      type: 'get',
                      datatype: 'json',
                      data: 'id='+id,
                      url:'https://clienteweb2017.000webhostapp.com/crud_ajax_json/deleteCliente.php',
                      success: function(data2)
                      {
                          console.log(data2);
                      }
                })
            });

    });

</script>

javascript jquery html5

asked by anonymous 11.11.2018 / 21:27

1 answer

passing by struct reference does not work (dynamic queue C) How to initialize this PhotoImage function from tkinter?

score 0 · Answer 1

Hello

Sorry if I'm wrong, but you seem to be a beginner on the subject. Take a look at the bootstrap option for super-efficient paging: link

It's fairly simple to understand and implement. It's worth remembering that using ready-made classes and frontend frameworks are often great outputs, but nothing prevents you from creating your own scripts and styles to create the visual effects you want.