Jump to content

Archived

This topic is now archived and is closed to further replies.

pepeghj

Paginação Php/mysql com transição

Recommended Posts

Olá, sou novato em php e estou desenvolvendo um sistema de posts para meu site, com uma paginação em php/mysql. eu gostaria que quando os botões (próximo/voltar) fossem clicados, carregasse os próximos valores da tabela com alguma transição. como faço? aqui eis meu código:

 

<div id="estrutura">

<div id="logo"></div>
<div id="post-area">
<div id="title-post-area">
<span id="fonte-title-post">    Últimos </br><b> Posts</b></span>
<div id="barra-amarela"></div>
<!-- Posts -->
</div>
<?php
include ('funcoes/conexao/config.php');
$busca = "SELECT * FROM posts";
$total_reg = "3";
$pagina=$_GET['pagina'];
if (!$pagina) {
$pc = "1";
}
else {
$pc = $pagina;
}
$inicio = $pc - 1;
$inicio = $inicio * $total_reg;
$limite = mysql_query("$busca LIMIT $inicio,$total_reg");
$todos = mysql_query("$busca");
$tr = mysql_num_rows($todos);
$tp = $tr / $total_reg;
while ($dados = mysql_fetch_array($limite)) {
$criador = $dados['criador'];
$texto = $dados['texto'];
echo "
<div id='post'>
<div id='post-dados'>
<div id='criador'></div>
<span id='fonte-criador'> $criador</span>
</div>
<div id='base-post'>
<span id='fonte-post'>
$texto
</span>
<div id='botao-post'><span id='fonte-botaopost'>MAIS</span></div>
</div>
</div>";
}
?>
<?php
$anterior = $pc -1;
$proximo = $pc +1;
?>
<div id="setas-post">
<? if ($pc<$tp)
{ echo " <a href='?pagina=$proximo'> <div id='seta-baixo-post'></div> </a> "; } ?>
<? if ($pc>1)
{ echo " <a href='?pagina=$anterior'> <div id='seta-cima-post'></div> </a> "; } ?>
</div>

 

 

Share this post


Link to post
Share on other sites

Mas como poderei implementar os efeitos jquery á minha paginação?

 

Você pode fazer o seguinte, pesquise sobre Ajax, o Ajax é um código que faz você poder usar o PHP sem ter de dar um reload na página, o ajax manda pro php o que você quer pesquisar no banco, ele pesquisa e quando retorna o ajax executa uma função que você define, nessa função você pode botar pra ter o efeito de transição e dai aparecer o que você quer.

 

 

Exemplo

$(document).ready(function() {  
      $(#botao).click(function() {
            $.ajax({                 
                type: 'POST',                                 
                url: 'salvar.php',                               
                data: {"dados": dados},                
                success: function(response) {                    
                         //o que vai ser feito com os dados que retornarem, bota a transição aqui               
                         }            
            });
      }                     
});

Share this post


Link to post
Share on other sites

  • Similar Content

    • By violin101
      Caros amigos, saudações...
       
      Fiz várias pesquisa, mas não consegui entender como devo fazer corretamente.
       
      Tenho um Cadastro de Produto/Clientes/etc.
       
      Gostaria de após clicar no Button ADICIONAR ou GRAVAR, quero mostrar na tela a seguinte mensagem:
      msg:
      Aguarde Processando...
       
      obs.: em alguns sistema até parece uma MODAL, com barra de progresso.
       
      Para impedir que o usuário fica Clicando nos Buttons.
       
      Alguém poderia me auxiliar de como devo fazer isso ?
       
      Grato,
       
      Cesar
    • By alysson122010
      Galera estou começando a trabalhar com datatables porem tenho uma dificuldade pq tipo até 200 registros por pagina é aceitavel mas penso quando tiver 2000 registro carregar tudo numa pagina so da errado pq é muitos dados e pode travar tudo.
      Como posso fazer para listar com limite por pagina ou alguma maneira para poder colocar varios dados sem travar.
       
      estou usando assim:
      <script type="text/javascript">        $(document).ready(function() {             $('#example').DataTable({         "order": [[ 0, "desc" ]],         "language": {             "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Portuguese-Brasil.json"         }     });         } );        </script> <table id="example" class="table table-striped table-bordered" style="width:100%">         <thead>             <tr>                 <th>Name</th>                 <th>Position</th>                 <th>Office</th>                 <th>Age</th>                 <th>Start date</th>                 <th>Salary</th>             </tr>         </thead>         <tbody>             <tr>                 <td>Tiger Nixon</td>                 <td>System Architect</td>                 <td>Edinburgh</td>                 <td>61</td>                 <td>2011/04/25</td>                 <td>$320,800</td>             </tr>             <tr>                 <td>Garrett Winters</td>                 <td>Accountant</td>                 <td>Tokyo</td>                 <td>63</td>                 <td>2011/07/25</td>                 <td>$170,750</td>             </tr>             <tr>                 <td>Ashton Cox</td>                 <td>Junior Technical Author</td>                 <td>San Francisco</td>                 <td>66</td>                 <td>2009/01/12</td>                 <td>$86,000</td>             </tr>             <tr>                 <td>Cedric Kelly</td>                 <td>Senior Javascript Developer</td>                 <td>Edinburgh</td>                 <td>22</td>                 <td>2012/03/29</td>                 <td>$433,060</td>             </tr>             <tr>                 <td>Airi Satou</td>                 <td>Accountant</td>                 <td>Tokyo</td>                 <td>33</td>                 <td>2008/11/28</td>                 <td>$162,700</td>             </tr>             <tr>                 <td>Brielle Williamson</td>                 <td>Integration Specialist</td>                 <td>New York</td>                 <td>61</td>                 <td>2012/12/02</td>                 <td>$372,000</td>             </tr>             <tr>                 <td>Herrod Chandler</td>                 <td>Sales Assistant</td>                 <td>San Francisco</td>                 <td>59</td>                 <td>2012/08/06</td>                 <td>$137,500</td>             </tr>             <tr>                 <td>Rhona Davidson</td>                 <td>Integration Specialist</td>                 <td>Tokyo</td>                 <td>55</td>                 <td>2010/10/14</td>                 <td>$327,900</td>             </tr>             <tr>                 <td>Colleen Hurst</td>                 <td>Javascript Developer</td>                 <td>San Francisco</td>                 <td>39</td>                 <td>2009/09/15</td>                 <td>$205,500</td>             </tr>         </tbody>         <tfoot>             <tr>                 <th>Name</th>                 <th>Position</th>                 <th>Office</th>                 <th>Age</th>                 <th>Start date</th>                 <th>Salary</th>             </tr>         </tfoot>     </table> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>  
    • By AlexandrePrezzi
      Seguinte
      Tenho uma página chamada  "teste.php" nessa página tem um formulário com vários campos que o usuário usa para fazer um filtro dos campos a serem pesquisado...
       
      Ao clicar no Pesquisar (submit) ... o action da página faz a seguinte ação
       
      script type="text/javascript"> $(function($){ $('#meuFormulario').submit(function(){ var dados = jQuery(this).serialize(); jQuery.ajax({ type: "POST", url: "src/controller/request_teste.php", data: dados, cache: false, beforeSend: function() { $('#resultPesq').html("Carregando..."); }, success: function(e) { //window.alert(e); $('#resultPesq').html(e); }, error: function() { $('#resultPesq').html('Não foi encontrado dados!'); } }); return false; }); }); </script> O arquivo "request_teste.php", é quem recebe os dados do POST e faz o  tratamento desses dados....
       
      Ao final desse arquivo tem um  require_once 'result_teste.php' que vem a ser o arquivo onde irá mostrar o resultado da pesquisa.
       
      Nesse arquivo eu fiz uma páginação ao final do resultado.
       
      Entao primeiramente o link que estou acessando é 
       
      principal.php?link=teste.php  (abre a pagina com o formulário)
      ao clicar em pesquisar o link nao muda
       
      quando clico em página 2, é feito um refresh e a url fica principal.php?link=teste.php&pag=2
       
      O que acontece é que como a página faz um refresh eu perco todos dados do meu POST e tambem preciso clicar no botão pesquisar pra carregar os dado da página 2.
       
      Alguem sabe como ajustar isso ?

      Se precisarem de mais informações me avisem
       
       
       
    • By New Job
      Tenho um checkout pagseguro configurado em um site e gostaria de ajustar o código. Linguagem é PHP.
×

Important Information

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