Place a pager in json

Question

A friend helped with the code, but I need to make it display 5 results per page and have a pager like < >.

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);
    });

});

Paging will be done on the server, because it will have many records.

Answer 1

The problem:

how to pass data from server to browser and show only a part of that data at a time? (paginar)

Necessary steps:

For this functionality you need to:

• communicate with the server, sending data about what you are looking for
• receive the data and enter the DOM
• have a UI (controls) to change the content

Should I pull all data to the client or go asking little by little on the server?

Depends.

If it’s little it can be very practical to avoid more asynchronous requests. The @utluiz gave a good example here.

If it is too much data it may be the case to ask little by little for the server. I will use this case in the example/answer.

Implementation

The part of Javascript

Here you already have half, that is the part that receives the JSON and inserts it into the DOM. What you lack now is how to send to the server which page you want.

Here are several options... buttons, input, or other ways. To get simple I will use only proxima and previous. Assuming these Ids on var condominioID = "2"; are the index you will use, so on page 1 you want to ask for ID 1. On page 2 you want to ask for ID 4 (since you mentioned that you want 3 items on each page).

So a button that is for "next page" has to send it to the server.

Example:

// 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

The part of HTML

As I did in the example above, HTML could be like this:

<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>

The PHP part (server)

This part isn’t much different than the one you already have. The only difference is that instead of passing all the inputs at once, you go to Javascript only 3 at a time, starting with the requested ID.

$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