Jump to content
marcelocardoso

Paginação BOOTPAG - TWBS

Recommended Posts

olá pessoal.
tentando criar paginação, moderna, busquei varios artigos na internet, porém, não consegui adaptar este.... que por sinal, fica joia, simples, rapido e objetivo, além de funcional para os tempos de hoje, jquery + bootstrap.

trata-se do BOOTPAG ou TWBS Pagination:
 

            <nav aria-label="Page navigation">
                <ul class="pagination" id="pagination"></ul>
            </nav>
                        
            <div id="pagination_pag">Page 1</div>
                        
            <script type="text/javascript">
                $('#pagination').twbsPagination({
                    totalPages: 35,
                    visiblePages: 2,
                    onPageClick: function (event, page) {
                        $("#pagination_pag").text('Page ' + page);
                    }
                });
            </script> 

Alguém já usou ele com ASP, ou PHP, onde posso utilizar junto com dados vindo de banco de dados????
Se alguem tiver exemplo e quiser postar, ou tiver dicas de como fazer, também, agradeço.

Via AJAX no script, procurei no STACK OVERFLOW, também nada...
Desde já agradeço.


 

Share this post


Link to post
Share on other sites

e procurando, encontrei este código...
só não tenho ideia de complementar a parte do PHP, para ASP?
 

<div class="table-responsive">
    <table class="table table-hover table-striped">
    <thead>
        <tr>
            <th>K-ID</th>
            <th>Name</th>
            <th>Ort</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <div id="results"></div>
    </tbody>
    </table>
    <div class="pagination"></div>
</div>


AJAX
$(document).ready(function() {
    $("#results").load("kontakte_data.php");
    $(".pagination").bootpag({
        total: <?php echo $pages; ?>,
        page: 1,
        maxVisible: 5,
    }).on("page", function(e, num){
        e.preventDefault();
        $("#results").load("kontakte_data.php", {'page':num});
    });
});

já usaram este plugin, sabem implementar, dicas, codigos para contribuição agradeço...
obrigado.

Share this post


Link to post
Share on other sites

pessoal,

consegui montar até aqui, com este plugin bootpag, quem quiser ajudar a concluir, serve para repositório de scripts dos colegas...
tá funcionando, porém, estou tentando adaptar dinamicamente, não conheço muito de PHP, apenas asp, então...
ajuda, é bem vinda.

CODE:
 

<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<style class="cp-pen-styles">
    .wrapper {
        margin: 60px;
    }

    h1 {
        margin-bottom: 1.25em;
        text-align: center;
    }

    #conteudo {
        padding: 5px;
        width: 100%;
        color: #222222;
        font-size: 11px;
        border-radius: 10px;
        background-color: rgba(206, 206, 206, 0.15)
    }
    
    #paginacao {
        margin-top: 50px;
        width: 100%;
        color: #999999;
        border-top: 1px solid rgba(206, 206, 206, 0.33);
        font-size: 11px;
    }

    .pager {
        margin-left: 0;
        margin-bottom: 18px;
        list-style: none;
        text-align: center;
        color: #6c58bF;
        *zoom: 1;
    }

    .pager:before,
    .pager:after {
        display: table;
        content: "";
    }

    .pager:after {
        clear: both;
    }

    .pager li {
        display: inline;
        color: #6c58bF;
    }

    .pager a {
        display: inline-block;
        padding: 5px 14px;
        color: #6c58bF;
        background-color: #fff;
        border: 1px solid #ddd;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

    .pager a:hover {
        text-decoration: none;
        background-color: #f5f5f5;
    }

    .pager .next a {
        float: right;
    }

    .pager .previous a {
        float: left;
    }

    .pager .disabled a,
    .pager .disabled a:hover {
        color: #999999;
    }
</style>
<div class="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1>Paginação BOOTPag JS</h1>
                <%
                   servidor = "localhost"
                   banco    = "db_verdesmares"
                   usuario  = "root"
                   senha    = "marmmc"
                   porta    = "3306"
                   opcao    = "3"

                   SET conexao = Server.CreateObject("ADODB.Connection")
                       conexao.Open "DRIVER={MYSQL ODBC 5.3 ANSI Driver};SERVER="&servidor&";PORT="&porta&";DATABASE="&banco&";UID="&usuario&";PWD="&senha&";OPTION="&opcao&";"

                   SET RS = Server.CreateObject("ADODB.RECORDSET")
                               SQL = "SELECT * FROM vm_noticias ORDER BY id DESC"
                       RS.Open SQL, conexao, 3, 3

                   IF RS.EOF THEN
                      Response.Write "Não existem registros a serem exibidos..."
                   ELSE
                      WHILE NOT RS.EOF
                %>
                    <div class="col-md-11 text-left" style="padding: 6px;"><b><%=RS("vmares_data")%></b> - <%=RS("vmares_titulo")%></div>
                <%
                          RS.MoveNext
                             Wend
                       END IF

                           RS.close  
                       SET RS = nothing
                           conexao.close      
                       SET conexao = nothing       
                %>
                    <div class="col-md-12" id="paginacao"></div>
                    <div class="col-md-4 col-md-offset-4 text-center">
                        <div class="col-md-4" id="conteudo">Paginação dos Dados</div>
                    </div>
            </div>
        </div>
    </div>
</div>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
<script src='https://cdn.rawgit.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js'></script>
                
                
                
<script type="text/javascript">
    var num ='<% Response.Write RS.RecordCount %>';
    (function($) {
        $(document).ready(function(){
            $('#paginacao').bootpag({
                total: 20,
                page: 1,
                maxVisible: 6,
                leaps: false,
                next: 'Próximo',
                prev: 'Anterior',
                activeClass: 'active',
                disabledClass: 'disabled',
                href: "#pag{{number}}",
            }).on("page", function(event, num){
                $.ajax({
                    url: "paginacao.asp?pag="+num,
                }).done(function(data) {
                    $("#conteudo").html( data );
                });
            });
        });
    })( jQuery );
</script>
                
                
                
<!--  COM ESTA O SCRIPT ACIMA FUNCIONA, ... ESTOU TENTANDO ADAPTAR O DE CIMA QUE NÃO FICA DINAMICAMENTE.  
<script>
    $('#paginacao').bootpag({
        total: 20,
        page: 1,
        maxVisible: 6,
        leaps: false,
        next: 'Próximo',
        prev: 'Anterior',
        activeClass: 'active',
        disabledClass: 'disabled',
        href: "#pag{{number}}",
    })
    $('#paginacao').on("page", function(event, num) {
        $("#conteudo").html("Você está na página: <b>" + num + "</b>");
    });
</script>
-->

Estou tentando adaptar o script do BOOTPAG com o link a seguir, que está em PHP:
https://stackoverflow.com/questions/35386812/paginate-table-with-bootpag-ajax
http://www.kodingmadesimple.com/2017/01/simple-ajax-pagination-in-jquery-php-pdo-mysql.html
 

... Quero deixar ela com acesso ao banco de dados....
Tentei adaptar com response.write no script, mas não rola...
Quem quiser contribuir transpondo o PHP para ASP, fica de boa...

NO mais, obrigado.

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 Matheus Bispo
      Boa tarde colegas programadores, estou com uma dúvida tremenda.
       
      Estou desenvolvendo um sistema para uma loja de veículos, e em uma parte do sistema, em cadastro de clientes, vai aparecer todos os clientes que ela possui em uma tabela(Usando DataTable do bootstrap), em cada cadastro, tenho um botão de editar, que imediatamente, abre uma janela modal com os dados daquele Cliente. Quando eu clico pela primeira vez em algum botão de Editar, ele me abre correto e o fechar é funciona normal. Agora vou clicar no editar novamente, porque anteriormente eu havia clicado no cliente errado, ele me traz os dados correto, mas o botão CANCELAR não funciona mais, preciso dar F5 para ele sumir. O que eu estaria fazendo de errado?
       
      Segue abaixo o meu código:
       
      <!DOCTYPE html>  
       <html>
            <head>  
                 <title>Clientes</title>
                 <link rel="shortcut icon" href="../assets/img/certi.png" type="image/x-icon" />
                 <form name="formulario" method="POST" action="">
                 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
                 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
                 <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>  
                 <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>            
                 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
                 <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
                     <!-- Include all compiled plugins (below), or include individual files as needed -->
                <script src="../assets/js/bootstrap.min.js"></script>
                <script src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.min.js"></script>
                <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
                <script src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.min.js"></script>
                <script type="text/javascript">
                  function Ir(pagina){
                    document.formulario.action = pagina
                    document.formulario.submit();
                  }
                </script>
            </head>  
      <body onselectstart="return false" oncontextmenu="return false" ondragstart="return false"
        onMouseOver="window.status='..message perso .. '; return true;">
                 <div class="container">
                     
                      <center> <img src='../assets/img/logo_clientes.jpg' class="img-responsive"> </center>
                      <br />
                  <?php
                     if(!empty($Dados["btnNovoCad"])):
                         $NovoCad = new CreateCliente();
                         unset($Dados["btnNovoCad"]);
                    $Dados["cli_garagem"] = $_SESSION["id-garagem"];
                         $NovoCad->exeCreate('clientes', $Dados);
                         echo $NovoCad->getMsg();
                     endif;
                     ?>
                      <div class="table-responsive">  
                           <table id="employee_data" class="table table-striped table-bordered">  
                                <thead>  
                                     <tr>  
                                          <td>ID</td>  
                                          <td>Nome</td>
                                          <td>Ações</td>
                                     </tr>  
                                </thead>
                                <?php
                                  $ChamarLeitura = new ReadCliente();
                                  $ChamarLeitura->LerClientes();
                                 foreach($ChamarLeitura->getResultado() as $clientes){
                                       extract($clientes);
                                     echo '  
                                     <tr>  
                                         <td>'.intval($cli_id).'</td>                                      
                                          <td>'.utf8_decode($cli_nome).'</td>
                                          ';?>
                                          <td>
                                              <button type="button" class="btn btn-xs btn-warning" data-toggle="modal" data-target="#myModalEdit" data-whatever="<?php echo $cli_id; ?>" data-whatevernome="<?php echo utf8_decode($cli_nome);?>">Editar</button>
                                          </td>                                   
                                     </tr>    
                                   <?php
                                  }  
                                ?>
                           </table>  
                      </div>  
                 </div><br>
              <center>
                  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModalNovo">Novo Cliente</button>
                  <button type="button" class="btn btn-primary" onClick="Ir('index');">Voltar ao Menu</button><br><br>
              </center>
       
      <!-- Inicio Modal Novo Cadastro -->
      <div class="modal fade" data-backdrop="static" id="myModalNovo">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h3 class="modal-title" id="exampleModalLabel">Cadastrar Cliente</h3>
                </div>
                <div class="modal-body">
                  <form name="formularioB" method="POST" action="">
                        <div style="text-align: left;">
                           Nome:*
                           <input type="text" class="form-control" name="cli_nome" required="true" autofocus="true"><br>
                           *Campos obrigatórios
                        </div>
                    <div class="modal-footer">
                      <input type="submit" class="btn btn-success" name="btnNovoCad" value="Salvar">
                      <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                    </div>
                  </form>
                </div>        
              </div>
            </div>
          </div>
          <!-- Fim Modal -->
       
      <!-- Inicio Modal Editar Cadastro -->
        <div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h3 class="modal-title" id="exampleModalLabel">Editar Cliente</h3>
                </div>
                <div class="modal-body">
                  <form name="formularioB" method="POST" action="">
                        <div style="text-align: left;">
                           Nome:*
                           <input type="text" class="form-control" name="cli_nome" id="cli_nome" required="true" autofocus="true"><br>
                        </div>
                    <div class="modal-footer">
                      <input type="submit" class="btn btn-success" name="btnEditCad" value="Salvar">
                      <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                      <input type="hidden" name="id-cliente" id="id-cliente" value="">
                    </div>
                  </form>
                </div>        
              </div>
            </div>
          </div>
          <!-- Fim Modal -->
       
        <script type="text/javascript">
          $('#myModalEdit').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var recipient = button.data('whatever')
            var recipientnome = button.data('whatevernome')
            var modal = $(this)
            modal.find('.modal-title').text('Editar Cliente')
            modal.find('#id-cliente').val(recipient)
            modal.find('#cli_nome').val(recipientnome)
            
          })
        </script>
         </form>
        </body>
       </html>  
       <script>  
       $(document).ready(function(){  
            $('#employee_data').DataTable();  
       });  
       </script>
    • By GabrielSCastro
      Olá pessoa, terminei a faculdade e recebi algumas propostas de projetos web, mas como ainda estou iniciando não tenho muita noção de quanto cobrar.
      Para um site, eu pensei em cobrar um valor razoável de entrada , e além deste valor, definir um contrato de um valor mensal para fazer manutenções necessárias, assim eu terei o cliente e uma renda sempre. Por outro lado, o cliente pode ficar com o site por pouco tempo e não chegar ao valor que eu gostaria pelo projeto. 
      Pensei também em cobrar por projeto, no minimo R$ 1000 por um site simples, já que to começando.

      Ai entra outro falta de experiência minha. Se eu cobrar por projeto, o cliente ficaria responsável por pagar o domínio e hospedagem dele ou eu contrataria uma hospedagem com a possibilidade de hospedar varios sites para quando eu tiver mais clientes.

      Indo mais direto ao ponto, gostaria que me ajudasse em como começar, cobrar, etc.

      Agradeço a quem puder ajudar.
    • By templateonweb
      Hi,
      Many of you want Bootstrap website templates. In this way, you have to develop a wonderful website.
      As this is the cheapest and fastest way to reach over the world. If you are interested in making a website by using Bootstrap website templates, then here I am sharing a website link that provides free website designs as Bootstrap website templates.
      If you are interested in then you can visit the site and use the best quality of Bootstrap website templates.
       
      Please visit: Bootstrap Website Templates
       
               
       
       
    • By Diego-SLP
      Bom dia.
       
      Estou fazendo uma tela a qual trará "blocos" que representarão minhas OBRAS, e dentro dessas OBRAS eu tenho os EQUIPAMENTOS que estou usando nela, estou tentando fazer para trazer todas em uma tela mas não consigo. 
      Os blocos que representam as OBRAS ok, aparecem corretamente, mas seus EQUIPAMENTOS não consigo "amarrar" a CHAVE daquele bloco para a pesquisa.
       
      Se alguem puder me ajudar agradeço. 
       
      <div class="row"><!--INICIO BLOCO DA OBRA--> <?php $procura = mysqli_query($con, "SELECT fr_equipamentos.cod_equip as codequip, fr_equipamentos.equipamento as equip, fr_obras.nome as obra, fr_obras.cod_obra as codobra FROM fr_movimentacao,fr_obras, fr_equipamentos WHERE fr_equipamentos.cod_equip = fr_movimentacao.cod_equip GROUP BY fr_obras.id" ) or die (mysqli_error($procura)); while($row = mysqli_fetch_array($procura)){ $cod_obra = $row['codobra']; ?> <div class="col-md-4"><!--col md 12--> <div class="card card-widget widget-user-2"> <!-- Add the bg color to the header using any of the bg-* classes --> <div class="widget-user-header bg-gradient-secondary"> <div class="widget-user-image"> <img class="img-circle elevation-3" src="dist/img/icon-obra.png" alt="Obra"> </div> <!-- /.widget-user-image --> <h3 class="widget-user-username"><strong><?php echo $row['codobra'];?></strong></h3> <h6 class="widget-user-desc"><?php echo $row['obra'];?></h6> </div> <table class="table table-striped table-sm"> <thead> <tr> <th style="text-align: center;">Cod</th> <th style="text-align: center;">Equipamento</th> <th style="text-align: center;">Operador</th> <th style="text-align: center;">Ações</th> </tr> </thead> <tbody> <tr> <?php $procura2 = mysqli_query($con, "SELECT fr_equipamentos.cod_equip as codequip, fr_equipamentos.equipamento FROM fr_obras, fr_equipamentos, fr_movimentacao WHERE fr_equipamentos.cod_equip = fr_movimentacao.cod_equip AND fr_movimentacao.cod_obra = '".$cod_obra."' GROUP BY fr_equipamentos.cod_equip" ) or die (mysqli_error($procura2)); while($row2 = mysqli_fetch_array($procura2)){ ?> <td><?php echo $row2['codequip'];?></td> <td>RETRO</td> <td>José Silva</td> <td> <button type="button" class="btn btn-block bg-gradient-info">Movimentar</button> </td> <?php }?> </tr> </tbody> </table> </div> </div><!--col md 3--> <?php } ?> </div><!--FIM BLOCO DA OBRA-->  
    • By Diego-SLP
      Bom dia, estou com um problema que ao inserir um registro no banco a confirmação via modal não ocorre, mas se eu coloco um botao chamando o modal ele é exibido, ou seja, os scripts e plugins estão corretos né ?! 
       
      Acho que estou esquecendo de algo para chama-lo, se alguem puder ajudar agradeço.
       
      <?php if(isset($_POST['btncadastrar'])){ $obra = strtoupper($_POST['obra']); $status = strtoupper($_POST['status']); $cadastrar = "INSERT INTO tblCliente (obra_cliente,status) VALUES ('$obra','$status')"; $cadastra = mysqli_query($con,$cadastrar); ?> <div class="modal fade" id="aviso" tabindex="-1" role="dialog" aria-labelledby="avisoLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Usuário cadastrado com Sucesso!</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">Corrigir Cadastro</button> <a href="index.php"><button type="button" class="btn btn-success">Ok</button></a> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $('#aviso').modal('show'); }); </script> <?php } ?>  
×

Important Information

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