-1
I have this code in HTML/Javascript/Jquery and I need to create a pagination with the server elements. The page displayed the elements from 5 to 5, I wanted to know how to proceed to the next pages and go back to previous.
<!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>