Pagination of Text

Asked

Viewed 266 times

2

How to page a text with Jquery ? I have a large text of about 5000 characters and I need to make it stay in some 5 pages with option NEXT PAGE AND PREVIOUS PAGE, I searched and I can not find any tutorial on the subject, only plugins that do this, someone can help me ?

I started the script but my weak programming logic did not let me continue... Follow what I have:

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

Probably to continue I need to create a loop for instead of the IF with the Slices...but I locked...

3 answers

3


I was already entertained and I didn’t see your html that you added to the question after... I put here what I was doing and I can adapt later.

Here is a suggestion: 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(' '));
    });
});

I didn’t use Slice in a string because I think it’s a bit of brute force, and it’s gonna break words in half. My suggestion separates by words and joins 100 words on each page.

  • Sergio, you quoted Slice very well. I’m just a little against making this control of the division of words in the JS because it worsens the performance of the user, I mean, in speed, because the DOM would have to be changed with each pagination. If the words already come cut right on the server, just show and hide the correct Ivs. What do you think?

  • 2

    @rafaels88, agree. I put the solution only with JS/jQuery because the question is not tagged php

  • It’s true. I only realized that PHP was there because of the code.

  • 1

    Valew @Sergio!!! was very confused my code, I was able to adapt your code to what I needed!!!

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>
  • Valew!! was more or less what I was doing before!

1

A suggestion, with a more elegant form in javascript would be:

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

This example uses regex for the split (which increases the split speed). As for using the Slice several times, I think this is not a problem, since you brought all the words to the browsers, processing them will not be a high cost.

Words about optimization

The ideal is that you bring the page information straight from the server (as @rafaels88 and @Sergio suggestion): $.get('url/?text=x&pag=1&len=5'...). In addition to bringing this information from the server, if the words are immutable, you could save them in your database per page. Thus, no processing would be necessary, only the request to the database.

Example in fiddlejs: http://jsfiddle.net/andrenmaia/DG7hU/

  • 1

    I did not understand how the regex increases the speed of the split. It even tested?

Browser other questions tagged

You are not signed in. Login or sign up in order to post.