Jump to content
marcelocardoso

Paginação Moderna Bootstrap

Recommended Posts

Galera,
Já que ninguém me deu um ALÔ, corri atrás como bom trabalhador e esforçado. Segue aí um exemplo para quem precisar, funcionando 100% em ASP e MySQL:::

Assim como eu precisei e passei muito trabalho para resolver, pode servir para alguém:
Ficou ótima.

 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

<style>
    .wrapper {
        margin: 60px;
    }

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

    #conteudo {
        padding: 5px;
        width: 100%;
        color: #222222;
        font-size: 11px;
        border-radius: 15px;
        background-color: rgba(206, 206, 206, 0.15)
    }
        
    #barra_linha {
        border-top: 1px solid rgba(206, 206, 206, 0.35); 
        margin-top: 30px;
        color: dimgrey;
    }
    #barra_registro {
        padding: 5px; 
        font-size: 15px;
        border-radius: 25px;
        background-color: #2a7dd0;
        color: white;
        width: 100px;
        height: 100px;
    }
    #barra_numero {
        padding: 5px; 
        background-color: rgba(206, 206, 206, 0.35);
    }
    #barra_total {
        padding: 5px; 
        background-color: rgba(206, 206, 206, 0.35);
    }
    
</style>
<div class="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1>Paginação Dinâmica</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&";DATABASE="&banco&";UID="&usuario&";PWD="&senha&";OPTION="&opcao&";"


                         SQL = "SELECT * FROM vm_noticias "
                   SET strRS = Server.CreateObject("ADODB.RECORDSET")
                       strRS.Open SQL, conexao, 3, 3

                   IF strRS.EOF THEN
                      Response.Write "Não existem registros a serem exibidos..."
                   ELSE
                   
                       PageLen = 1
                        PageNo = Request.QueryString("numpagina")  

                           IF PageNo = "" THEN PageNo = 1

                                TotalRecord = UBound(strRS.GetRows,2)+1  
                                  PageStart = ((PageLen*PageNo)-PageLen)  
                                    PageEnd = PageLen

                                IF TotalRecord <= PageLen THEN
                                          TotalPage = 1  
                                  ELSEIF (TotalRecord MOD PageLen = 0) THEN  
                                          TotalPage = (TotalRecord/PageLen)  
                                  ELSE  
                                          TotalPage = (TotalRecord/PageLen) + 1  
                                          TotalPage = Cint(TotalPage)  
                                END IF  

                          strRS.close    
                                     SQL = SQL & "ORDER BY id DESC LIMIT "& PageStart &" , "& PageEnd &""
                          strRS.Open SQL, conexao, 1, 3  
                WHILE NOT strRS.EOF
                %>
                <div class="col-md-11 text-left" style="padding: 6px;"><b><%=strRS("vmares_data")%></b> - <%=strRS("vmares_titulo")%></div>
                <%
                strRS.MoveNext
                      Wend
                END IF
                %>

                
                <!-- PAGINAÇÃO COMPLETA -->
                    <script type="text/javascript">
                        $(document).ready(function() {
                            
                        });
                    </script>
                    <div id="barra_linha" class="col-md-12"></div>
                    <div class="col-md-6 text-left">
                        <ul class="pagination pagination-sm">
                            <% 
                            IF Cint(PageNo) = 1 THEN 
                            %>
                            <li class="page-item disabled">
                                <a class="page-link fa fa-home" href="<% Request.ServerVariables("SCRIPT_NAME")%>?numpagina=1" tabindex="-1"></a>
                            </li>
                            <li class="page-item disabled">
                                <a class="page-link" aria-label="Previous" href="<% Request.ServerVariables("SCRIPT_NAME")%>?numpagina=<%=PageNo-1%>" tabindex="-1">Anterior</a>
                            </li>
                            <% 
                            ELSE 
                            %>
                            <li class="page-item">
                                <a class="page-link fa fa-home" href="<% Request.ServerVariables("SCRIPT_NAME")%>?numpagina=1" tabindex="-1"></a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" aria-label="Previous" href="<% Request.ServerVariables("SCRIPT_NAME")%>?numpagina=<%=PageNo-1%>" tabindex="-1">Anterior</a>
                            </li>
                            <% 
                            END IF
                            FOR intID = 1 TO TotalPage
                             IF intID = Cint(PageNo) THEN  
                            %>
                                <li class="page-item active"><a class="page-link" href="#"><b><%=intID%></b></a></li>
                            <%
                            ELSE
                            %>
                                <li class="page-item"><a class="page-link" href="<% Request.ServerVariables("SCRIPT_NAME")%>?numpagina=<%=intID%>"><%=intID%></a></li>
                            <%
                               END IF
                            NEXT 
                            IF Cint(PageNo) = TotalPage THEN 
                            %>
                            <li class="page-item disabled">
                                <a class="page-link" aria-label="Next" href="<% Request.ServerVariables("SCRIPT_NAME")%>?numpagina=<%=PageNo+1%>">Proxima</a>
                            </li>
                            <li class="page-item disabled">
                                <a class="page-link fa fa-arrow-circle-right" href="<% Request.ServerVariables("SCRIPT_NAME")%>?numpagina=<%=TotalPage%>"></a>
                            </li>
                            <%
                            ELSE
                            %>
                            <li class="page-item">
                                <a class="page-link" aria-label="Next" href="<% Request.ServerVariables("SCRIPT_NAME")%>?numpagina=<%=PageNo+1%>">Proxima</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link fa fa-arrow-circle-right" href="<% Request.ServerVariables("SCRIPT_NAME")%>?numpagina=<%=TotalPage%>"></a>
                            </li>
                            <%
                            END IF
                            %>
                        </ul>
                    </div>
                                    
                                    
                    <div class="col-md-6">
                        <div class="col-md-12 text-right" style="padding-top: 25px; font-size: 10px;">
                            Navegando na página <b id="barra_numero"><%= PageNo %></b> de <b id="barra_total"><%= TotalPage %></b>
                        </div>
                        <div class="col-md-12 text-right" style="padding-top: 10px; font-size: 10px; color: dimgray;">
                            TOTAL DE <b id="barra_registro"><%= TotalRecord %></b> REGISTROS
                        </div>
                    </div>
                    <!-- PAGINAÇÃO COMPLETA -->
                            
                                                        
            </div>
        </div>
    </div>
</div>
                
                
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js'></script>
                    

<% 
      strRS.close
    conexao.close

SET strRS = Nothing 
SET conexao = Nothing  
%>

No mais agradeço.
Obrigado.

Melhorias, postem...

  • -1 1

Share this post


Link to post
Share on other sites

Olá.
Eu criei uma paginação em ASP formatada em Boot Strap, não muda nada da antiga, apenas troco os links pelos modelos formatados CSS do Boot Strap.
A minha a partir da página 2 abre o botão de "Anterior", e o botão de "Próximo" aparece acima de 1 página e desparece na última, veja anexo como fica!
Se você tiver algum problema na sua, escreva!

Ver anexo
Abraços!

paginacao.jpg

  • +1 1

Share this post


Link to post
Share on other sites

Tem alguns exemplos que postei, dá uma olhada vai te ajudar

Share this post


Link to post
Share on other sites
Em 21/11/2017 at 09:20, marcelocardoso disse:

Ok, fábio depois de algumas pesquisas, consegui desenvolver uma...
semelhante a sua, mas tá de boa, ficou ótima as duas, a sua e a minha....

valeu....

olá Marcelo. aquele código que você postou lá em cima que começa com:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

<style>
    .wrapper {

seria para o início do código ?

digo, para o início do default.asp (arquivo principal do site)

definindo tudo isso ele se torna responsivo ?

 

Obrigado. Mario

 

 

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 Sapinn
      Como mudar o cor da letra de um active em um menu no boostrtrap
       
      <nav class="navbar navbar-expand-lg navbar-light bg-light">         <div class="container">           <a class="navbar-brand" href="#">             <img src="icone.png" height="60px" alt="Logo">           </a>           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">             <span class="navbar-toggler-icon"></span>           </button>                  <div class="collapse navbar-collapse d-lg-flex justify-content-end" id="navbarSupportedContent" style="font-size: 20px;">             <ul class="navbar-nav" >               <li class="nav-item active" >                 <a class="nav-link" href="#">Inicio</a>               </li>               <li class="nav-item" >                 <a class="nav-link" href="#">Login</a>               </li>               <li class="nav-item">                 <a class="nav-link" href="#">Aluno</a>               </li>               <li class="nav-item">                 <a class="nav-link" href="#">Professor</a>               </li>               <li class="nav-item">                 <a class="nav-link" href="#">Fale Conosco</a>               </li>             </ul>           </div>                </div>       </nav>  
    • By Matheus B. Siqueira
      Olá, estou criando um modal para o usuário preencher alguns dados. Realizei a formatação em colunas com o bootstrap em web, porém, ao passar para mobile, a formatação muda tudo. Gostaria de sugestões de como poderia solucionar o problema.

      Não manjo muito da responsividade.
       
      Segue abaixo as imagens mobile e web, respectivamente, junto ao código do modal;
       

      <div class="modal fade" id="modalAutentMonitor" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Autenticar monitor</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body text-md-center"> <!--SEÇÃO--> <div class="form-row"> <div class="form-group"> <div class="col-12 col-md-12"> <input type="password" class="form-control" id="codigo_monitor" name="codigo_monitor" placeholder="Código:"> <br> </div> </div> <div id="botoes_monitor" class="col-6 col-md-8 offset-md-2"> <button type="submit" name="btnAutentMonitor" id="btnAutentMonitor" class="btn btn-outline-warning">Enviar</button> <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalSelecionar" data-dismiss="modal">Voltar</button> </div> </div> <h6 class="text-center" id="resposta_c_r"></h6> <div id="correto" class="d-none"><i class='iconize fas fa-thumbs-up'></i></div> <div id="incorreto" class="d-none"><i class='iconize fas fa-thumbs-down'></i></div> </div> </div> </div> </div>  
    • 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 Gorimem
      Olá boa tarde, estou apredendo bootstrap e gostaria de tirar uma duvida se possível. Existem class especificas do bootstrap que eu acharia melhor fazer de maneira não padronizada mas não sei se isso teria impacto no final. Exemplo: margin-top no bootstrap é mt, e são predefinidos 0 a 5 os niveis. Mas se eu quiser usar uma margem diferente da apresentada nesses niveis usando margin-top: 30% por exemplo, vai mudar alguma coisa? Obg. Talvez essa duvida seja besta mas estou no começo do bootstrap
    • 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.
×

Important Information

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