Botão "carregar mais" com AJAX/JSON não funciona
Boa tarde pessoas,
estou com uma dificuldade em um parte do meu site que estou fazendo, onde pretendo colocar uma opção de "carregar mais" para fazer o load de mais objetos na página, porém não está funcionando.
Eu até consegui um código quase 100% funcional (mais abaixo) porém com erros de duplicações. Neste que estou utilizando atualmente, eu estou fazendo a contagem total das arrays direto no JSON.
Este é o código que estou utilizando atualmente:
$(document).ready(function() {
function loopTable(test, index, table){
var write;
if(test){
write += '<tr class="count">';
write += '<td>' + table.name + '</td>';
write += '<td>' + table.data + '</td>';
if (table.status === true) {
write += '<td class="ap">Aprovado</td>';
} else {
write += '<td class="ng">Negado</td>';
}
write += '<td>' + table.id + '</td>';
write += '<td><button class="bt_delete">Deletar</button></td>';
write += '</tr>';
$('#mytable').append(write);
}
}; //end function
var url = "data/results.json";
var galleryLength;
var jsonLength;
$.ajax(url, {
success: function(data){
if(data){
var jsonLength = data.length;
}
}
}); //end ajax
$.getJSON(url, function (response){
$.each (response, function (index, table) {
loopTable(index <= 0, index, table);
}); //end each
}); //end getJSON
var galleryLength = $('.count').length;
$('.more').on('click', function(event){
event.preventDefault();
$.ajax(url, {
success: function(data){
$.each(data, function(index, table){
loopTable(jsonLength >= galleryLength && jsonLength > galleryLength + 1, index, table);
});
},
error: function(){
$('.more').append('<h3>Desculpe, houve um problema.</h3>');
},
beforeSend: function(){
$('.more').hide();
$('.spinner').fadeIn();
},
complete: function(){
$('.spinner').hide();
$('.more').fadeIn();
}
}); //end ajax
}); //end click
}); //end ready
Teve um outro código que utilizei que estava funcionando, porém, ele duplicava alguns dos itens na hora de exibir na página, o que ficou inviável. Neste caso, eu estava usando uma propriedade ID, que é o código único do DB, para ordenar os objetos. Porém me dava uma contagem não sequencial, pois se eu apagar um objeto no meio dessa lista, a contagem ficaria vazada. Ex: 1, 2, 3, 5, 6, 9, ...
Esse é o código que funciona, porém com repetição:
$(document).ready(function() {
function loopTable(test, index, table){
var write;
if(test){
write += '<tr class="count">';
write += '<td>' + table.name + '</td>';
write += '<td>' + table.data + '</td>';
if (table.status === true) {
write += '<td class="ap">Aprovado</td>';
} else {
write += '<td class="ng">Negado</td>';
}
write += '<td>' + table.id + '</td>';
write += '<td><button class="bt_delete">Deletar</button></td>';
write += '</tr>';
$('#mytable').append(write);
}
}; //end function
var url = "data/results.json";
var galleryLength;
$.getJSON(url, function (response){
$.each (response, function (index, table) {
loopTable(index <= 0, index, table);
}); //end each
}); //end getJSON
var galleryLength = $('.count').length;
$('.more').on('click', function(event){
event.preventDefault();
$.ajax(url, {
success: function(data){
$.each(data, function(index, table){
loopTable(table.id >= galleryLength && table.id < galleryLength + 1, index, table);
});
},
error: function(){
$('.more').append('<h3>Desculpe, houve um problema.</h3>');
},
beforeSend: function(){
$('.more').hide();
$('.spinner').fadeIn();
},
complete: function(){
$('.spinner').hide();
$('.more').fadeIn();
}
}); //end ajax
}); //end click
}); //end ready
Aqui está meu HTML:
<button class="more">Carregar mais</button>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Data</th>
<th>Status</th>
<th>ID</th>
<th>Ação</th>
</tr>
</thead>
<tbody id="mytable"></tbody>
</table>
E um modelo do meu JSON:
[
{"name":"Nome 01","data":"2015-01-01","id":"1"},
{"name":"Nome 02","data":"2015-01-01","id":"2"},
{"name":"Nome 04","data":"2015-01-01","id":"4"},
{"name":"Nome 05","data":"2015-03-11","id":"5"},
{"name":"teste 1","data":"2015-03-11","id":"6"},
{"name":"teste 2","data":"2015-03-12","id":"7"},
{"name":"teste cadastro","data":"2015-03-13","id":"8"},
{"name":"Teste cad","data":"2015-03-18","id":"10"},
]
Discussão (2)
Carregando comentários...