Pagination of Text

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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/