Text Paging

Question

Text Paging

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)

2

How to page text with JQuery? I have a large text of about 5000 characters and I need to make it stay in about 5 pages with the option of NEXT PAGE and PREVIOUS PAGE, I researched and found no tutorial on the subject, only plugins that do this, can anyone help me? >

I started the script but my weak programming logic did not let me proceed ... Here's 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 proceed, I need to create a for loop in place of the IF with the slices ... but I caught ...

javascript jquery

asked by anonymous 19.06.2014 / 22:15

3 answers

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>

19.06.2014 / 22:39

1

One 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 split (which increases split speed). As for using the slice multiple times, I believe that this is not a problem, since you have brought all the words to the browsers, processing them will not be a high cost.

Words about optimization

Ideally, you should bring the page information straight from the server (as suggested by @ rafaels88 and @Sergio): $.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 by page. Thus, no processing would be required, just the request for the database.

Example on fiddlejs: link

20.06.2014 / 18:00

Using Flash Professional, how do I import classes from an ActionScript file? How to create a tab menu with JavaScript?

score 3 · Accepted Answer

I was already entertained and did not see your html that added the question later ... I put here what I was doing and I can adapt later.

Here's a suggestion: link

$(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 did not use the slice in a string because I find it kind of brute force, and it will break words in half. My suggestion separates by words and joins 100 words on each page.