0

Bom dia pessoal, estou fazendo um site que tem os posts, porém não quero usar o sistema de paginação, quero fazer um botão que carregue mais post, daí queria saber como faço..

<header id="top">
    <a href="#"><p id="nome">projeto</p></a>
</header>

<div id="principal">
    <div class="linha">
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
    </div>
    <div class="linha">
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
    </div>
    <div class="linha">
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
    </div>
</div>

<div id="butao">
    <p id="load">MAIS</p>
</div>

Esse é o código que fiz até agora, será quem alguém pode me ajudar? Fazendo com que quando o botão "MAIS" seja clicado, ele carregue uma nova linha com mais 3 posts..

Desde já agradeço..

3

2 Respostas 2

2

@TássioGonçalves, você pode fazer com os seguintes passos:

  1. Atribui o event handler click ao botão "Carregar mais".
  2. Conta o número de itens existentes na página.
  3. Faz pedido de dados a uma página PHP que vai buscar no BD
  4. Recebe esses dados e insere-os na página.

index.html

<ul class="itens">
   <li class="item">A</li>
   <li class="item">B</li>
   <li class="item">C</li>
</ul>
<button class="mais">Carregar mais</button>

PASSO 1 E 2

jquery-script.js

// Atribui um event handler ao botao  - evento click
$(".mais").on('click', function () {
        var nItens = $itens.find(".item").length; // Conta o numero de itens
        var dadosEnviar = { offset : nItens };    // Dados que serao enviados ao BD. Será o número de ítens na página.
       pedidoAjax(dadosEnviar); 
});

Pedido AJAX que espera a resposta do servidor no formato JSON. Nesse caso, um vetor de strings no formato JSON.

var pedidoAjax = function(dadosEnviar) {
    $.ajax({
        data: dadosEnviar,        // dados a serem enviados
        dataType: "json",         // Formato do dado **recebido como resposta do servidor**.  html, json, text ...
        method: "post",           // post ou get
        url: "myPHPscript.php",   // url invocada
        success: function (dados, textStatus, jqXHR) {

            // Executado em caso de sucesso.
            console.log(dados + " " + textStatus + " " + jqXHR + " ");

            inserirItens(dados);
        },
        error: function (jqXHR, textStatus, errorThrown) {

            // Executado em caso de erro.
            alert(jqXHR + " " + textStatus + " " + errorThrown);
            error();
        }
    });
}

Você pode ver mais nesse post.

PASSO 3

/**
 * Funcao que insere os dados na lista
 * @param {string[]} dados. Vetor de strings. FORMATO: ["nome 1", "nome 2", "nome 3"]
 */
var inserirItens = function(dados) {
    function addItem(indice, dado) {
        // Cria item da lista
        var $li = $("<li></li>");

        // Configura-o
        $li.addClass("item");
        //...
        $li.html(dado);

        // Insere o elemento no DOM
        $li.appendTo($itens);
    }

    $.each(dados, addItem); // Para cada elemento no vetor `dados`, invoca a funcao `addItem`
}

O código PHP pode ser algo assim

myPHPscript.PHP

//Altera o cabeçalho para que o PHP saiba que o retorno será uma string JSON
header('Content-Type: application/json; charset=utf-8');

// Recebe os dados (Número de ítens existentes na página do cliente)
$contentType = $_SERVER["CONTENT_TYPE"];
$response_array['contentType'] = $contentType;

$aDados = json_decode(file_get_contents("php://input"), true); // Recebe dados como array associativo. 

// Busca no BD
// Se o BD for MySQL ou PostgreSQL, use LIMIT e OFFSET para fazer a busca, ex:
// "SELECT nome FROM tabel LIMIT 3 OFFSET ".$aDados["nItens"].";";


// Cria array com os dados do BD
$dados = array();
while ($r...)               // $r guarda o resultado do BD
{
   $dados[] = $r["nome"];
}
// agora $dados é um array que contém todos os nomes buscados no BD.

// Converte o array para JSON e "retorna"
echo json_encode($response_array);

PASSO 4

/**
 * Funcao que insere os dados na lista
 * @param {string[]} dados. Vetor de strings. FORMATO: ["nome 1", "nome 2", "nome 3"]
 */
var inserirItens = function(dados) {
    function addItem(indice, dado) {
        // Cria item da lista
        var $li = $("<li></li>");

        // Configura-o
        $li.addClass("item");
        //...
        $li.html(dado);

        // Insere o elemento no DOM
        $li.appendTo($itens);
    }

    $.each(dados, addItem); // Para cada elemento no vetor `dados`, invoca a funcao `addItem`
}
0

Gabriel o que pretendes implementar é algo tipo infinitscroll, tens muitos exemplos, fiz um para ti.

http://codepen.io/H3ld3rM3/pen/ozPBOW

4
  • Muito obrigado, mas o que seria o $("div:hidden") que tem no codigo?
    – Gabriel
    23/10/2016 às 0:09
  • Essa solução não carrega mais 3, e sim exibe mais 3, o ideal seria carregar realmente, ou seja, desse jeito eu teria que trazer todos os meus registros de uma vez. 22/05/2018 às 3:16
  • @TássioGonçalves, você pode buscar os dados por AJAX. Olha esse post pt.stackoverflow.com/a/297125/91181 . A diferença desse outro post é que não precisará coletar dados do form. 24/05/2018 às 7:46
  • Carregar e ocultar não será a melhor solução para nenhuma necessidade, acabaria por pesar o carregamento da página e até mesmo atrapalhando um possível trabalho de SEO.
    – ElvisP
    16/02/2019 às 13:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .