-6

Um amigo ajudou com o código, mas estou precisando fazer com que ele exiba 5 resultados por página e tenha um paginador tipo < >.

var operacao = "selectOcorrencias";
var condominioID = "2";

$.getJSON("http://url.com.br/appOperacoes.php", {
    operacao: operacao,
    condominioID: condominioID
}, function(json) {
    var target = document.getElementById('selectOcorrencias');
    json.forEach(function(ocorrencia) {
        // link externo / wrapper
        var a = document.createElement('a');
        a.className = 'list-group-item allow-badge widget uib_w_45';
        a.setAttribute('data-uib', 'twitter%20bootstrap/list_item');
        a.setAttribute('data-ver', '1');
        a.id = ocorrencia.ID_Ocorrencia;
        // titulo
        var heading = document.createElement('h4');
        heading.className = 'list-group-item-heading';
        heading.innerHTML = 'Ocorrência: ' + ocorrencia.ID_Ocorrencia;
        // texto
        var p = document.createElement('p');
        p.className = 'list-group-item-text';
        p.innerHTML = ocorrencia.morador;

        // inserir no DOM
        a.appendChild(heading);
        a.appendChild(p);
        target.appendChild(a);
    });

});

A paginação será feita no servidor, pois terá muitos registros.

5
  • Amigo, quem deve tratar a paginação é o servidor! Na tela, você apenas irá realizar o controle. Commented 21/12/2015 às 18:28
  • @ThiagoLuizDomacoski Você poderia me ajudar a fazer isso?
    – Tiago
    Commented 21/12/2015 às 18:30
  • Olhe Isto , veja o que entende, e caso haja dúvida, edite seu post com suas novas dúvidas! Commented 21/12/2015 às 18:36
  • @ThiagoLuizDomacoski Olá Tiago, não pode ser em PHP, tem que ser em JS.
    – Tiago
    Commented 21/12/2015 às 18:43
  • Mas seu serviço será em PHP, certo? url.com.br/appOperacoes.php ! lá você terá que alterar para receber a página solicitada Ex.: url.com.br/appOperacoes.php?pg=1. Após feito isso no seu JS você terá que guardar a página e conforme o clik em > adicionar mais um e buscar o novo resultado. Commented 21/12/2015 às 18:43

1 Resposta 1

3

O problema:

como passar dados do servidor para o browser e mostrar somente uma parte desses dados de cada vez? (paginar)

Passos necessários:

Para essa funcionalidade precisas de:

  • comunicar com o servidor, enviando dados sobre o que procuras
  • receber os dados e inserir no DOM
  • ter um UI (controlos) para poder mudar o conteúdo

Devo puxar os dados todos para o cliente ou ir pedindo aos poucos no servidor?

Depende.

Se fôr pouca coisa pode ser bem prático evitar mais pedidos assíncronos. O @utluiz deu um bom exemplo aqui.

Se forem muitos dados pode ser o caso de pedir a pouco e pouco para o servidor. Vou usar este caso no exemplo/resposta.

Implementação

A parte do JavaScript

Aqui já tens metade, ou seja a parte que recebe o JSON e o insere no DOM. O que te falta agora é como enviar para o servidor que página queres.

Aqui há várias opções... botões, input, ou outras maneiras. Para ficar simples vou usar somente proxima e anterior. Partindo do principio que essas IDs em var condominioID = "2"; são o index que vais usar, assim na página 1 queres pedir a ID 1. Na página 2 queres pedir a ID 4 (uma vez que referiste que queres 3 items em cada página).

Então um botão que seja para "próxima página" tem de enviar isso para o servidor.

Exemplo:

// estou a assumir que "prox" e "ant" são respetivamente objetos do DOM
var id = 1; // para começar com algo
var ant = document.getElementById('anterior');
var prox = document.getElementById('proximo');
ant.addEventListener('click', function() {
    id -= 3;
    if (id < 0) id = 1;
    paginar(id);
});
prox.addEventListener('click', function() {
    id += 3;
    paginar(id);
});

function paginar(condominioID) {
    var operacao = "selectOcorrencias";
    var condominioID = condominioID || 2; // aqui recebes a info da ID

    $.getJSON("http://url.com.br/appOperacoes.php", {
        operacao: operacao,
        condominioID: condominioID
    }, function(json) {
        var target = document.getElementById('selectOcorrencias');

        // esvaziar o conteúdo anterior. 
        // Se quiseres acrescentar e não apagar remove esta linha em baixo
        target.innerHTML = ''; 

        json.forEach(function(ocorrencia) {
            // etc... esta parte já tens correta
        });

    });
}
paginar(); // para correr quando o site carrega

A parte do HTML

Como fiz no exemplo em cima , o HTML podia ser assim:

<div class="list-group widget uib_w_44 d-margins" data-uib="twitter%20bootstrap/list_group" data-ver="1">
    <!-- o conteudo vem para aqui... -->
</div>
<button type="button" id="anterior">página anterior</button>
<button type="button" id="anterior">proxima página</button>

A parte do PHP (servidor)

Esta parte não é muito diferente da que já tens. A unica diferênça é que em vez de passares todas as entradas de uma vez, passas para o JavaScript somente 3 de cada vez, começando na ID que foi pedida.

$id_inicial = $_GET['condominioID'];
// medida de precaução para confirmar que a ID é numérica
if (!preg_match("/\d/i", $id_inicial) || !is_int($id_inicial)) $id_inicial = 1;
// a partir daqui usar esse ID na query à base de dados
0

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 .