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