Jump to content
marcelocardoso

Paginação Moderna Bootstrap

Recommended Posts

exemplos de paginação em ASP e CSS, alguém tem?
tentei a do TEDK, mas não consegui rodar no MySQL...

agradeço sugestões e contribuições....

  • -1 1

Share this post


Link to post
Share on other sites

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

Colegas...
Consegui resolver de outra maneira, mas mesmo assim, obrigado pelos que tentaram e se doaram em ajudar...
Muchas Gracias...

FINALIZADO

  • -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

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....

  • -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 Mewmew
      Bom dia!
       Teria como alguém me ajudar? 
      Sou bem iniciante nos códigos e acabou me surgindo uma duvida/problema a qual estou tentando resolver desde hoje cedo...
       
       Preciso criar um contêiner dentro de outro contêiner igual a imagem 1.
       
      Só que ele está ficando igual a imagem 2.
       
       Estou utilizando o bootstrap para tentar arrumar isso de uma forma que também traga a responsividade. 
      Basicamente eu criei um container fluid e dentro dele tinha outro container, só que não estou conseguindo posicionar ambos corretamente! 
       



    • By DinhoPHP
      Olá!
      Tenho um carousel em Bootstrap que se ajusta automaticamente à página, porém no modo mobile fica muito pequeno. O carousel está direto no <body>. Segue o código.
       
      O resultado pode ser visualizado em: http://equipenovainfo.com.br/_portifolio/br_informatica_tec/
       
      <!-- CAROUSEL --> <div id="carousel_slide" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li class="active bg-primary" data-target="#carousel_slide" data-slide-to="0"></li> <li class="bg-primary" data-target="#carousel_slide" data-slide-to="1"></li> <li class="bg-primary" data-slide-to="#carousel_slide" data-target-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="img-fluid" src="_imagens/_slide/foto01.jpg" alt=""> <div class="carousel-caption text-dark d-none d-md-block"> <h2>Título da Descrição I</h2> <p class="lead">A descrição deste anúncio do banner aparece aqui!</p> </div> </div> <div class="carousel-item"> <img class="img-fluid" src="_imagens/_slide/foto02.jpg" alt=""> <div class="carousel-caption text-dark d-none d-md-block"> <h2>Título da Descrição II</h2> <p class="lead">A descrição deste anúncio do banner aparece aqui!</p> </div> </div> <div class="carousel-item"> <img class="img-fluid" src="_imagens/_slide/foto03.jpg" alt=""> <div class="carousel-caption text-dark d-none d-md-block"> <h2>Título da Descrição III</h2> <p class="lead">A descrição deste anúncio do banner aparece aqui!</p> </div> </div> </div> <a class="carousel-control-prev" href="#carousel_slide" role="button" data-slide="prev"> <span class="carousel-control-prev-icon"></span> <span class="sr-only">Anterior</span> </a> <a class="carousel-control-next" role="button" data-slide="next" href="#carousel_slide"> <span class="carousel-control-next-icon"></span> <span class="sr-only">Avançar</span> </a> </div>  
    • By Rafael_Ferreira
      Datetimepicker do Bootstrap fica português só fora da internet testando no Wampserver passando para um domínio o datetimepicker funciona só que fica em inglês.
      Código:
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="stylesheet" href="css/bootstrap.min.css">
      <script src="js/jquery.min.js"></script>
      <script src="js/bootstrap.min.js"></script>

              <link href="css/bootstrap-combined.min.css" rel="stylesheet"/>
      <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>


      <script src="js/bootstrap-datetimepicker.min.js"></script> 
      <script src="js/bootstrap-datetimepicker.pt-BR"></script>
      <body>
      </head>
      <div class="container">
      <div class="row justify-content-center">
      <table class="table">
      <thead>

      <th>&nbsp;ID_Cliente</th>
      <th>Preço</th>

      <th>Quantidade</th>
      <th>Total dos Serviços</th>
      <th>Forma de Pagamento</th>
      <th>Data</th>
      <th Colspan="9">Ação

      </th>
      </thead>

      <button type="button" class="btn btn-dark">Cliente</button>
      <button type="button" class="btn btn-secondary">Caixa</button>
      <button type="button" class="btn btn-primary">Relatorio1</button>
      <button type="button" class="btn btn-success">Relatorio2</button>

      <tbody>
        <tr>
            <td>&nbsp;1</td>
            <td>148,00</td>
        <td>1,0</td>
        <td>188,0</td>
        <td>Dinheiro a vista</td>
        <td>2011-08-19-13:45:00</td>


      <td>
      <button type="button" class="btn btn-info">Edit</button>
      <button type="button" class="btn btn-danger">Delete</button>
      </td>   
      </tr>
      <tr>
            <td>&nbsp;2</td>
            <td>308,00</td>
        <td>1,0</td>
        <td>399,23</td>
        <td>Débito no cartão</td>
        <td>2011-08-20-22:45:00</td>
      <td>
      <button type="button" class="btn btn-info">Edit</button>
      <button type="button" class="btn btn-danger">Delete</button>
      </td>   
      </tr>


      </table>
      </div>

      <BR>
      <BR>
      <BR>





      <div class="row justify-content-center">
      <form action="" method="POST">
      <div class="form-group row">
      <div class="col-xs-8">
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <label class="input-group-text" for="inputGroupSelect01">Serviços</label>
        </div>
        <select class="custom-select" id="inputGroupSelect01">
          <option selected>Escolha</option>
          <option value="1">Corte</option>
          <option value="2">Hidratação</option>
          <option value="3">Coloração</option>
      <option value="4">Relaxamento</option>
      <option value="5">Progressiva</option>
      <option value="6">Escova</option>
        </select>
      </div>
      </div>
      </div>

      <div class="form-group row">
      <div class="col-xs-8">
       <label for="cod">ID_Cliente:</label>
       <input type="text" class="form-control" id="cod" aria-describedby="name" placeholder="">
      </div>
      </div>
      <div class="form-group row">
      <div class="col-xs-8">
       <label for="preco">Preço:</label>
       <input type="text" class="form-control" id="preco" aria-describedby="name" placeholder="">
      </div>
      </div>


      <div class="form-group row">
      <div class="col-xs-8">
      <label for="Quantidade">Quantidade:</label>
       <input type="text" class="form-control" id="quantidade" aria-describedby="quantidade" placeholder="">
      </div>
      </div>
      <div class="form-group row">
      <div class="col-xs-8">
      <label for="totaldeserv">Total dos Serviços:</label>
       <input type="text" class="form-control" id="totaldeserv" aria-describedby="totaldeserv" placeholder="">
      </div>
      </div>
      <div class="form-group row">
      <div class="col-xs-8">
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <label class="input-group-text" for="inputGroupSelect01">Forma de Pagamento:</label>
        </div>
        <select class="custom-select" id="inputGroupSelect01">
          <option selected>Escolha</option>
          <option value="1">Cartão de crédito</option>
          <option value="2">Cartão de débito</option>
          <option value="3">Dinheiro</option>

        </select>
      </div>
      </div>
      </div>

      <div id="datetimepicker" class="input-append date">
            <label for="totaldeserv">Data_Horário</label>
        <input type="text"></input>
            <span class="add-on">
              <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
            </span>
      </div>

      <div class="form-group row">
      <div class="col-xs-8">
      <button type="submit" name="save" class="btn btn-primary">Salvar</button> 
      </div>
      </div>
      </div>
      </form>
      </div>
      </div>

          <script type="text/javascript">
            $('#datetimepicker').datetimepicker({
              format: 'dd/MM/yyyy hh:mm:ss',
              language: 'pt-BR'
            });
          </script>
      </body>
      </html>
      ----------------------------------------------------------------------------------------------
      /**
       * Brazilian translation for bootstrap-datetimepicker
       * Cauan Cabral <cauan@radig.com.br>
       */
      ;(function($){
      $.fn.datetimepicker.dates['pt-BR'] = {
      days: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado", "Domingo"],
      daysShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "---", "Sáb", "Dom"],
      daysMin: ["Do", "Se", "Te", "Qu", "Qu", "Se", "Sa", "Do"],
      months: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
      monthsShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
      today: "Hoje"
      };
      }(jQuery));
    • By Walter_White
      Boa tarde,
      Estou atentar implementar bootstrap numa página estática no blogger. No entanto, quando coloco a biblioteca:
      href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”
      A página fica totalmente alterada.
      Alguem me consegue ajudar a cancelar os efeitos da biblioteca no que não quero.
       
       
      Alguem me consegue ajudar?
       
      Muito obrigado,
       
    • By isaque_cb2
      Olá galera, eu estou trabalhando em um site pessoal, mais para aprendizado mesmo, mas me deparei com um erro, quando eu abro o site no navegador (PC) funciona normal, mas quando abro no celular, a imagem dica pequena e no topo, alguém pode me ajudar com isso?
      print 1: (modo mobile do inspecionar)

      no PC fica normal, repare a área cinza abaixo da imagem, toda essa área devia ser coberta pela imagem, grato!
      http://prntscr.com/mvj3ed
       
      Grato desde já!
×

Important Information

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