Jump to content
kerven

Preciso de uma javascrip para usar associado a um botão de proximo ou anterior

Recommended Posts

eae pessoal

queria um javascript para associar a um botão.

seria para usar em botoes de próximo e anterior, esse script tem que levar a uma pagina html q está na pasta do html atual

as paginas são numeradas, por exemplo: 0.html, 1.html, 2.html, 3html...

 

eu queria uma variável, que quando estivesse, por exemplo na numero 2.html, o botao "anterior" vá para a 1.html e o botao " próximo" vá para 3.html, 

 

algo do tipo 

 

 Anterior= valor da pagina atual.html - valor da pagina atual -1.html e redirecionar para ela

proximo= valor da pagina atual.html + valor da pagina atual + 1.html e redirecionar para ela

 

Share this post


Link to post
Share on other sites

ai vc vai precisar gravar em um cookie, pois quando carregar a proxima pagina, a memoria do javascript vai ser reiniciada, e as variaveis voltarão ao valor inicial.

 

com um cookie, vc teria essa referência

Share this post


Link to post
Share on other sites

Você pode criar um arquivo JavaScript com o código abaixo:

var paginaAtual = parseInt(window.location.pathname.match(/\/(\d+)\./)[1]); // expressão regular que localiza um nº inteiro entre uma "barra" e um "ponto", por exemplo "/15.html" torna-se apenas "15"
var paginaAnterior = Math.max(0, paginaAtual-1); // calcula qual seria a página anterior, considerando que a menor página disponível será 0.html
var proximaPagina = Math.min(99, paginaAtual+1); // calcula qual seria a próxima página, considerando que a maior página disponível será 99.html

salvá-lo por exemplo com o nome "nav.js" e utilizá-lo da seguinte forma em seus arquivos HTML:

<script src="nav.js"></script>
<a href="javascript:window.location=paginaAnterior+'.html'">Anterior</a>
<a href="javascript:window.location=proximaPagina+'.html'">Próximo</a>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ygorme
      Por favor, alguém me ajuda? Limitei para 12 imagens por página. Fiz o upload de 24 fotos.. mas só aparece a primeira página (numéro 1). Ou seja, era para ter aparecido as próximas páginas (2 e 3) No site, a paginação não é clicável.É algum erro bobo que estou deixando passar :(
       
      <?php session_start(); require_once '_header.php'; require_once '_database.php'; if (!empty($_GET['act']) && $_GET['act'] == 'logout') { unset($_SESSION["id"]); header('location:index.php'); exit(); } $arr_cat[] = array(); $records = $conn->prepare('SELECT * FROM categoria order by nome'); if ($records->execute()) { $arr_cat = $records->fetchAll(PDO::FETCH_ASSOC); } $_POST['paginaAtual'] = !empty($_POST['paginaAtual']) ? trim($_POST['paginaAtual']) : 1; $_POST['qtdeItensPagina'] = !empty($_POST['qtdeItensPagina']) ? $_POST['qtdeItensPagina'] : 12; // always initialize a variable before use! $conditions = array(); $parameters = array(); // conditional statements if (!empty($_POST['legenda'])) { // here we are using LIKE with wildcard search // use it ONLY if really need it $conditions[] = 'legenda LIKE ?'; $parameters[] = '%'.$_POST['legenda']."%"; }else $_POST['legenda'] = ''; if (!empty($_POST['id_categoria'])) { // here we are using equality $conditions[] = 'id_categoria = ?'; $parameters[] = $_POST['id_categoria']; }else $_POST['id_categoria'] = 0; // the main query $sql = "SELECT * FROM post"; // a smart code to add all conditions, if any if ($conditions) { $sql .= " WHERE ".implode(" AND ", $conditions); } $parameters[] = ($_POST['paginaAtual'] - 1) * $_POST['qtdeItensPagina']; $parameters[] = $_POST['qtdeItensPagina']; $sql_post = $sql . " ORDER BY id DESC LIMIT ?, ?"; // the usual prepare/execute/fetch routine $stmt = $conn->prepare($sql_post); $stmt->execute($parameters); $arr_post = $stmt->fetchAll(PDO::FETCH_ASSOC); $stmt_qtde = $conn->prepare($sql); $stmt_qtde->execute($parameters); $vet = $stmt_qtde->fetch( PDO::FETCH_ASSOC ); $qtdeTotal = (int)$vet['qtde']; ?> <main role="main"> <section class="shadow-md p-3 bg-white rounded"> <div class="container"> <form method="post"> <div class="form-row align-items-center"> <div class="col-sm-12 col-md-8 "> <input type="text" name="legenda" value="<?=$_POST['legenda']?>" class="form-control" placeholder="Busque por um assunto ou hashtag..."> </div> <div class="col-sm-12 col-md-3 "> <select class="custom-select" name="id_categoria"> <option value="0">Todas categorias...</option> <?php foreach ($arr_cat as $row) {?> <option <?=$row['id'] == $_POST['id_categoria'] ? 'selected' : ''?> value="<?=$row['id'];?>"><?=$row['nome'];?></option> <?php }?> </select> </div> <button type="submit" class=" col-sm-12 col-md-1 btn btn-primary"><i class="fas fa-search"></i></button> </div> <input type="hidden" name="paginaAtual" value="<?=$_POST['paginaAtual']?>" /> </form> </section> <div class="album py-5"> <div class="container"> <?php if (count($arr_post) > 0) { ?> <div class="row"> <?php foreach ($arr_post as $row) {?> <div class="col-sm-12 col-md-3"> <div class="card mb-4 shadow-sm"> <img class="card-img-top" src="<?=$file_path . $row['nome_file']?>"> <div class="card-body"> <div class="card-title"><h6><?=$row['nome']?></h6></div> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <?php if(!$limite_alcancado){?> <a data-toggle="tooltip" title="Ao pressionar download, será copiado a legenda para área de transferência" data-text="<?=$row['legenda']?>" target="_blank" href="_download.php?q=<?=base64_encode($row['id'].$separador.$row['nome'])?>" class="btn btn-sm btn-outline-primary btn_legend"><i class="fas fa-download"></i> Download</a> <a href="detalhe.php?q=<?=base64_encode($row['id'].$separador.$row['nome'])?>" class="btn btn-sm btn-outline-secondary"><i class="fas fa-info-circle"></i> Visualizar Legenda</a> <?php }else{?> <a target="_blank" href="https://www.odontop.com" class="btn btn-sm btn-success"><i class="fas fa-up"></i> Limite alcançado - realizar upgrade?</a> <?php }?> </div> <!-- <small class="text-muted">9 mins</small> --> </div> </div> </div> </div> <?php } //foreach?> </div> <div class="row shadow-md p-3 bg-white rounded"> <div class="col-sm-12 col-md-6"> <div id="paginacao"></div> </div> </div> <?php } else { //if echo '<div class="alert alert-warning">Nenhuma imagem encontrada</div>'; } ?> </div> </div> </main> <footer class="text-muted"> <div class="container"> <p class="float-right"> <a href="#navbarHeader"></a> </p> <p>Odontop - Copyright © 2019</p> </div> </footer> <script type="text/javascript"> const totalItens = <?=$qtdeTotal?>; const itensPorPagina = <?=$_POST['qtdeItensPagina']?>; </script> <script src="js/jquery-3.3.1.slim.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/pagination.min.js"></script> <script src="js/post.js"></script> </body> </html>  

    • By adrianno
      Fala pessoal beleza?
      Tenho um problema para resolver,  tenho um sistema em PHP com MySQL, mas preciso melhorar a paginação,  tenho uma 2 lógicas de paginação em mente, uma delas é a que mais se encontra e videos, blogs, postagens  mostrando na web,
       
      onde damos um primeiro select CAMPO from TABELA, contamos  o resultado e temos o total de registros para tratar a quantidade de páginas, limite, quantidade que vai aparecer por página etc,  apos isso damos novamente o select CAMPOS from TABELA limite x, y  de acordo com o que obtivemos na lógica da paginação com a primeira SQL. esta lógica até que funciona, mas, não consegui aplicar ela usando JOIN  agrupando 2 ou mais tabelas, pois ai, eu teria  que fazer esta contagem  lá a primeira SQL, ou seja no fim, teria 2 SQL sendo executadas , uma mais rápida devido ao limit passado, mesmo assim ainda seriam 2 consultas.
      Outras lógica seria dar um SELECT count(CAMPO) from TABELA  seria uma SQL mais rápida,  mas...  se eu tiver um JOIN agrupando dados de uma tabela de categoria + produtos, eu teria que contar o resultado já agrupado das 2.
      Já pensei em executar a consulta normal, retornar o array dos dados, e depois paginar este array  com array_slice, e dividir ele de acordo com a quantidade de páginas e registros de cada.
      Já fiz paginação com JS/AJAX  mas mesmo assim, ainda preciso passar os dados totalizados, consigo uma boa visualização final na interface, mas por tras, sei que o processamento no MYSQL pesa
       
      Lembrando que em cada caso citado, cada vez que alteramos entre as páginas, é novamente executado os calculos.
       
      Alguem tem uma lógica bacana para paginação? de forma que nao fique pesado, lento em uma tabela muito grande?
       
       
       
       
       
       
       
    • By NINO2391
      Bom Glr, Tô Fazendo Um Web Site E Quero Fazer Umas Funções Escondidas Nela!
       
      bom meu objetivo era tipo apertas as tecla do teclado CTRL+A e abrir uma janela flutuante
      <form action=""> <input type="file" name="tag"><br> <input type="submit" value="Submit"> </form> Então vou falar resumidamente: ENTRAVA NO SITE, APERTAVA CTRL+A E APARECIA ESSA JANELA FLUTUANTE!!
       
      Quem Puder Ajudar....Ficaria Mil Agradecido!!!
    • By rgrtorres
      Boa noite galera, fiz um sistema de página, porém quando uso .html para mostrar o resultado no jQuery, ele me retorna apenas um valor, e quando uso outros tipo append, ele me retorna todos os valores que desejo, como resolvo essa questão, não quero usar append.
       
      PHP:
      <?php include '../assets/app/config.php'; $conexao = new Conexao($config); $pagina = (isset($_POST['pagina'])) ? $_POST['pagina'] : 1; $sqlPaginacao = $conexao->conectar()->query("SELECT * FROM noticias"); $total = $sqlPaginacao->num_rows; $qtd = 2; $paginas = ceil($total / $qtd); $inicio = ($qtd * $pagina) - $qtd; $tudo[] = array("paginas" => $paginas); $sql = $conexao->conectar()->query("SELECT * FROM noticias LIMIT $inicio, $qtd"); while($mostra = $sql->fetch_assoc()) {     $tudo[] = array("titulo" => $mostra['titulo']); } echo json_encode($tudo); ?>  
       
       
      jQuery:
      var paginacao = {     atual: 1,     next: function(tipo){         paginacao.atual++         $.ajax({             type: "POST",             url: "paginacao.php?pagina=" + paginacao.atual,             data: {'pagina' : paginacao.atual},             dataType: 'json',             success: function (result) {                 var botao = $(".arrow.next")                 for (var i = 0; i < result.length; i++) {                     var html =     "<article class='news'>";                         html +=        result[i]['titulo'];                         html +=    "</div>";                     $('.all').html(html);                 }                 if(tipo == 'next') {                     $(".arrow.back").removeClass('disabled');                 }                 if(paginacao.atual >= result[0]['paginas']) {                     botao.removeAttr('onclick');                     $(".arrow.next").addClass('disabled');                     $(".arrow.back").removeClass('disabled');                 }else if (paginacao.atual > 1){                     $(".arrow.back").removeClass('disabled');                 }             }         });     },     prev: function(tipo){         paginacao.atual--         $.ajax({             type: "POST",             url: "paginacao.php?pagina=" + paginacao.atual,             data: {'pagina' : paginacao.atual},             dataType: 'json',             success: function (result) {                 var botao = $(".arrow.next")                 botao.attr('onclick', 'paginacao.next()');                 for (var i = 0; i < result.length; i++) {                     var html =     "<article class='news'>";                         html +=        result[i]['titulo'];                         html +=    "</div>";                     $('.all').html(html);                 }                 if(tipo == 'next') {                     $(".arrow.back").removeClass('disabled');                 }                 if (paginacao.atual <= 1) {                     $(".arrow.back").addClass('disabled');                     $(".arrow.next").removeClass('disabled');                 } else {                     $(".arrow.back").removeClass('disabled');                 }             }         });     } }  
    • By Pablo Bernardo
      Gostaria de fazer um botão que levasse o usuário não pra uma página da web, e sim para um aplicativo de seu computador.
      No caso iniciasse o aplicativo do computador ai clicar no botão.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.