Put a pager in jSON

Question

Put a pager in jSON

Navigation

#1 by (2 votes)

-5

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

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

});

The pagination will be done on the server as it will have many records.

javascript jquery json

asked by anonymous 21.12.2015 / 19:23

1 answer

Save images to the database and then show them in a listview [closed] When opening a php file with localhost / file.php the page appears blank [closed]

score 2 · Accepted Answer

The problem:

How to pass data from server to browser and show only part of this data at a time? (page)

Required steps:

For this feature you need:

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

Should I pull the data all to the client or go askin 'on the server?

It depends.

If there is little, it can be very practical to avoid further asynchronous requests. @utluiz gave A good example here .

If it's too much data it may be the case to ask the server bit by bit. I'll use this case in the example / response.

Implementation

The JavaScript part

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

Here are several options ... buttons, input, or other ways. In order to be simple I will only use next and previous . Based on the principle that these IDs in var condominioID = "2"; are the index that 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) / p>

Then a button that is to "next page" must send this 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 HTML part

As I did in the example above, HTML could look 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 is not much different from the one you already have. The only difference is that instead of passing all the entries at once, you go to JavaScript only 3 at a time, starting at the ID that was requested.

$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