Carregamento sob Demanda

[Abraao Duarte]

Olá, eu dei uma pesquisada sobre carregamento sob demanda e não to conseguindo aplicar isso numa tabela.

Eu tenho uma tabela que recebe dados do BD, e tenho um botão no final.

Eu queria que a cada clique do usuário sobre esse botão carregasse mais 10 registros, ate não ter mais nenhum. Quando não tivesse nenhum o botão desaparecer.

Alguém poderia me ajudar.

[Tenshi]

Olá, para essa funcionalidade costumamos dar o nome de paginação, no seu caso ela seria realizada por ajax pelo que entendi.

Basicamente você teria os resultados da primeira página carregadas e ao clicar em um botão fosse disparada uma requisição ajax que trariam os resultados da página 2 e estes seriam adicionados ao final da sua lista já carregada, apenas realizando um "append" no DOM.

Por favor me corrijam se eu estiver falando besteira.

Em todo caso procure por "ajax pagination", deve te trazer bons resultados para o que você procura.

[Abraao Duarte]

Obrigado pela resposta. Seria basicamente isso mesmo

Eu tenho uma lista com vários registro, só que pra não mostra tudo de uma só vez, queria criar um botão que carregasse 20 registro cada vez que clicasse para a lista não ficar grande. 

Vou procurar por ajax-pagination

 

[Abraao Duarte]

Procurei por ajax-pagination mais não era o que precisava.

É um scroll infinito, só que em vez de carregar quando a pagina chega ao final, quero carregar com o clique do botão os registros.

Só que não consigo aplica isso á tabelas.

Os exemplos são tudo com listas.

[Leidson Dias]

https://github.com/anjlab/jquery-infinite-scroll

http://jsfiddle.net/ndonkin/mxLY8/

E é só você adicionar o botão e colocar ele para startar a ação no lugar de ser startada pelo scroll.

--
--
Grupo de jQuery Brasil.
 
REGRAS: https://docs.google.com/document/d/1VfvTDmeHTSj-L5ouZJjQQ4OkjTCU1Hr2XtPYBNGVHH4/edit
 
USE O JSBIN.COM / JSFIDDLE.NET PARA CÓDIGOS.
 
Email: jque...@googlegroups.com
Biba: jquery-br+...@googlegroups.com
Site: http://groups.google.com/group/jquery-br?hl=pt-BR

---
Você recebeu essa mensagem porque está inscrito no grupo "jQuery (Brasil)" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para jquery-br+...@googlegroups.com.
Para mais opções, acesse https://groups.google.com/d/optout.

--

Leidson Dias | http://leidsondias.com.br/

Graduado em Análise e Desenvolvimento de Sistemas - Estácio IDez

[Cadmiel Jorge]

@Abraao fiz uma vez isso, carregamento sobre demanda do geito que o @Tenshi sugere porem fiz no braço ficou muito legal,

cara não é dificil de fazer praticamente nosso amigo @Tenshi ja deu o fluxo.

Em 7 de abril de 2015 14:17, Abraao Duarte <abraao....@gmail.com> escreveu:

--

[Abraao Duarte]

Em quinta-feira, 9 de abril de 2015 13:45:58 UTC-3, Abraao Duarte escreveu:

Olá depois da ajuda, consegui fazer o código para carregar 10 items a cada click no botão. Até ai tá tudo beleza.

Só que na tabela tenho dois botões que quando clicados abrem uma linha abaixo da tabela para edição de conteúdo, um efeito Togle.

Os botões funcionam, mas quando aperto o botão para carregar mais, os 10 primeiros param de funcionar e só os que foram carregados funcionam.

Se aperto novamente para carregar mais 10, os 20 primeiros não funcionam e só os 10 últimos funcionam.

Gostaria de mais essa ajuda. 

<script>

$(document).ready(function(){

var showIgreja = $('#showIgreja').val();

var showMes = $('#showMes').val();

var showAno = $('#showAno').val();

var showItems = 0;

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

showItems = showItems + 10

$('div#loadmoreajaxloader').show();

        $.ajax({

type: "POST",

        url: "../ajax/showMore.php",

data: { showItems: showItems, showAno: showAno, showMes: showMes, showIgreja: showIgreja },

        success: function(html)

        {

            if(html)

            {

                $("#postswrapper").append(html);

                $('div#loadmoreajaxloader').hide();

            }else

            {

                $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');

            }

        }

        });

});

});

</script> 

[Abraao Duarte]

Obrigado pela ajuda.

Problema resolvido.

coloquei nos eventos click do botão esse código e deu certo. Obrigado pela ajuda de todos.

$( document ).on( "click", ".class", function()