2

Como páginar um texto com JQuery ? Tenho um texto grande de uns 5000 caracteres e preciso fazer ele ficar em umas 5 páginas com opção de PROXIMA PÀGINA e PÀGINA ANTERIOR, pesquisei e não encontro nenhum tutorial sobre o assunto, somente plugins que fazem isso, alguém pode me ajudar ?

Comecei o script mais minha lógica de programação fraca não me deixou prosseguir...Segue o que tenho:

<script>
$(document).ready(function() {
    var pagina = 1;
    var texto2 = $("#none").val().toString();
    var len =  texto2.length;

    if (len > 800 || len < 1600)
    {
    var len =  texto2.slice(0, 800);
    var len2 =  texto2.slice(800, 1600);
    var len3 =  texto2.slice(1600, 2400);
    var len4 =  texto2.slice(2400, 3000);
    }

    var paginatotal = 1;

    $("#divtest").append(len);

});

$("#divtest2").click(function() {
    if (pagina <= paginatotal)
    {
    var pagina = pagina + 1;
    }
    else
    {
    var pagina = paginatotal;
    }
});


$("#divtest3").click(function() {
    if (pagina > 1)
    {
    var pagina = pagina - 1;
    }
    else
    {
    var pagina = 1;
    }
});

</script>

<textarea id="none" style="display: none;"><?php echo $row[texto]; ?></textarea>
<hr><div id="divtest"></div>
<BR><div id="divtest2">proxima</div><div id="divtest3">anterior</div>

Provavelmente pra prosseguir preciso criar um loop for no lugar do IF com os slices...mas travei...

0

3 Respostas 3

3

Eu já estava entretido e não vi o seu html que juntou à pergunta depois... Coloco aqui o que estive a fazer e posso adaptar mais tarde.

Aqui fica uma sugestão: http://jsfiddle.net/jJ5b9/

$(document).ready(function () {
    var pagina = 1;
    var texto = $("#original").text().split(' ');
    var quantidadeTexto = 100;
    var destino = $("#paginas");
    destino.html(texto.slice(0, quantidadeTexto).join(' '));
    $("button").click(function () {

        var proxima = $(this).hasClass('proximo');

        if (proxima) {
            var max = (pagina * quantidadeTexto) + quantidadeTexto;
            if (max > texto.length + quantidadeTexto) return; // se tiver chegado ao fim das palavras
            excerto = texto.slice(pagina * quantidadeTexto, max);
            pagina++;
        } else {
            if (pagina == 1) return // se estiver na primeira página
            pagina--;
            excerto = texto.slice((pagina * quantidadeTexto) - quantidadeTexto, pagina * quantidadeTexto);

        }
        destino.html(excerto.join(' '));
    });
});

Nõ usei o slice numa string pois acho isso meio força bruta, e vai partir palavras ao meio. A minha sugestão separa por palavras e junta 100 palavras em cada página.

4
  • Sergio, você citou muito bem a respeito do slice. Apenas sou um pouco contra de fazer este controle da divisão das palavras no JS pois isto piora a performance do usuário, digo, em velocidade, pois o DOM teria que ser alterado a cada paginação. Se as palavras já vierem cortadas direitinho no server, basta mostrar e esconder as divs corretas. O que você acha?
    – rafaels88
    Commented 19/06/2014 às 20:45
  • 2
    @rafaels88, concordo. Coloquei a solução só com JS/jQuery porque a pergunta não tem tag php
    – Sergio
    Commented 19/06/2014 às 20:52
  • É verdade. Só me toquei que tinha PHP por causa do código.
    – rafaels88
    Commented 19/06/2014 às 20:54
  • 1
    valew @Sergio!!! tava bem confuso meu código, consegui adaptar o seu código para o que eu precisava!!!
    – Alan PS
    Commented 19/06/2014 às 21:23
1
<style>
    .page {display: none}
    .visible {display: block}
</style>

<div class="page visible" id="page-1"><?php echo substr($row[texto], 0, 100); ?>
<div class="page" id="page-2"><?php echo substr($row[texto], 100, 200); ?>
<div class="page" id="page-3"><?php echo substr($row[texto], 200, 300); ?>
<div class="page" id="page-4"><?php echo substr($row[texto], 300, 400); ?>
<span class="anterior">Anterior</span> <span class="proximo">Proximo</span>

<script>
    $().ready(function(){
        $(".proximo").click(function(){
          var $next = $(".visible").next(".page");

          if($next.length){
            $(".visible").removeClass('visible');
            $next.addClass('visible');
          }
        });
        $(".anterior").click(function(){
          var $prev = $(".visible").prev(".page");
          if($prev.length){
            $(".visible").removeClass('visible');
            $prev.addClass('visible');
          }
        });
    });
</script>
1
  • valew!! era mais ou menos isso que eu estava fazendo antes!
    – Alan PS
    Commented 19/06/2014 às 21:25
1

Um sugestão, com um forma mais elegante em javascript seria:

var text = 'O texto de 5000 palavras foi omitido aqui, mas está em um exemplo no fiddlejs logo abaixo';
var re = /\s+/;

function get(page, len){
    var words = text.split(re);
    return words
            .slice(len*page,(len*page)+len)
            .join(' ');
}

var pageData = get(1, 5);
console.log(pageData);

Esse exemplo utiliza regex para o split (o que faz aumentar a velocidade do split). Quanto a utilizar o slice várias vezes, creio que isso não seja um problema, já que você trouxe todas as palavras para o browsers, processá-las não será um custo alto.

Palavras sobre otimização

O ideal é que você traga a informação da página direto do servidor (conforme sugestão @rafaels88 e @Sergio): $.get('url/?text=x&pag=1&len=5'...). Além de trazer essas informações do servidor, se as palavras são imutáveis, você poderia salvá-las no seu banco de dados por página. Assim, nenhum processamento seria necessário, apenas a solicitação para o banco de dados.

Exemplo no fiddlejs: http://jsfiddle.net/andrenmaia/DG7hU/

1
  • 1
    Não entendi direito como o regex aumenta a velocidade do split. Chegou a testar?
    – Largato
    Commented 20/06/2014 às 16:32

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 .