4
I have developed a simple pagination page for my studies and am having a problem with the click event when I go to the next page. On the first page the event works but when I go to the next the event seems to get lost. What can be?
Follow my code below.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
table {
border-spacing: 0px;
border-collapse: separate;
width: 100%;
border-bottom: 1px solid #aaa;
text-align: center;
}
thead td {
margin: 0;
padding: 0;
padding: 2px;
}
thead th {
margin: 0;
padding: 5px;
border-bottom: 1px solid #aaa;
}
#myTable td {
cursor:pointer;
background: -moz-linear-gradient(top, #ffffff, #D1E3E9);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#D1E3E9));
text-align:center;
}
#myTable td:hover{
background: -moz-linear-gradient(top, #249ee4, #057cc0);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#249ee4), to(#057cc0));
}
#myTable td:active
{
background: -moz-linear-gradient(top, #057cc0, #249ee4);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#057cc0), to(#249ee4));
}
div {
padding-top: 10px;
text-align: center;
}
</style>
<script>
var dados = [
['Banana', '10,00'],
['Maça', '2,00'],
['Pera', '6,00'],
['Goiaba', '3,25'],
['Tamarindo', '1,50'],
['Cenoura', '0,75'],
['Alface', '0,99'],
['Tomate', '3,21'],
['Abacaxi', 'N/D'],
['Kiwi', '99,50'],
['Cebola', '1,15'],
['Alho', '1,02'],
['Abóbora', '4,75'],
['Pêssego', '2,33'],
['laranja', '2,99']
];
var tamanhoPagina = 3;
var pagina = 0;
function paginar() {
$('table > tbody > tr').remove();
var tbody = $('table > tbody');
for (var i = pagina * tamanhoPagina; i < dados.length && i < (pagina + 1) * tamanhoPagina; i++) {
tbody.append(
$('<tr>')
.append($('<td>').append(dados[i][0]))
.append($('<td>').append(dados[i][1]))
)
}
$('#numeracao').text('Página ' + (pagina + 1) + ' de ' + Math.ceil(dados.length / tamanhoPagina));
}
function ajustarBotoes() {
$('#proximo').prop('disabled', dados.length <= tamanhoPagina || pagina >= Math.ceil(dados.length / tamanhoPagina) - 1);
$('#anterior').prop('disabled', dados.length <= tamanhoPagina || pagina == 0);
}
function obtemPosicaoCelula()
{
$("#myTable tbody td").click(function() {
var column_num = parseInt( $(this).index() ) + 1;
var row_num = parseInt( $(this).parent().index() )+1;
$("#result").html( "Row_num =" + row_num + " , Rolumn_num ="+ column_num );
});
}
$(function(){
$('#proximo').click(function() {
if (pagina < dados.length / tamanhoPagina - 1) {
pagina++;
paginar();
ajustarBotoes();
}
});
$('#anterior').click(function() {
if (pagina > 0) {
pagina--;
paginar();
ajustarBotoes();
}
});
paginar();
ajustarBotoes();
obtemPosicaoCelula();
});
</script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Descrição</th>
<th>Valor</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" align="center">Nenhum dado ainda...</td>
</tr>
</tbody>
</table>
<div>
<button id="anterior" disabled>‹ Anterior</button>
<span id="numeracao"></span>
<button id="proximo" disabled>Próximo ›</button>
</div>
<div id="result"> </div>
</body>
</html>
Forehead to change
$("#myTable tbody td").click(function() {
for$("#myTable tbody").on('click', 'td', function() {
- thus, using delegation the click is not lost.– Sergio
Thank you. It worked.
– Leandro