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

alguém, consegue dar uma ajudinha na parte e que entenda de BOOTPAG, somente a parte do AJAX, carregar as noticias e jogar a paginação bootpag...

desde agradeço.

 

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

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

FINALIZADO

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 Cesar Melo
      Olá. Gostaria de uma opinião sobre onde focar meus estudos para trabalhar com PHP.
      Atualmente tenho conhecimentos com a linguagem PHP, e os seguintes frameworks: Bootstrap e Jquery.
      Recentemente fiz um curso de Laravel+materialize e gostei muito desse framework. Meu primeiro contato com framework para backend e pretendo utilizar o Laravel daqui pra frente nos meus estudos.
       
      Minha questão é a seguinte, quero dar continuidade aos meus estudos para me qualificar para o mercado de trabalho, mas não sei exatamente os próximos cursos que vou estudar.
      Não sei se atualmente há uma combinação de frameworks mais utilizada ou requisitada no mercado de trabalho. Ex: Laravel+vue+bootstrap, ou laravel+angularjs+materialize, tipo isso.
       
      Dei uma pesquisada no google e youtube, e notei que não há muito conteúdo de cursos por exemplo de Laravel+angularjs.
      Procurando algumas vagas de emprego, notei que há grande procurar para profissionais com qualificação em Laravel, e tambem grande procura para profissionais com qualificação em AngularJs, porém vagas distintas. Acho que não vi nenhuma vaga que peça Laravel+AngularJs.
       
      Alguém aí pode me passar uma visão ou dar sua opinião sobre isso, para eu focar meus estudos? Alguém sabe o que andam usando bastante? Ou que seja indicado de trabalhar em conjunto com PHP?
       
      Ah, uma observação... atualmente meu foco são de projetos voltados para sistemas, admin, etc. Não tenho muito perfil para projetos de marketing ou que exijam um frontend "lindo". rsrs.
       
      Grato...
    • By lordstarlight
      Olá galera,
       
      Tenho um código que abre uma janela modal clicando num botão .
      Como faço para adaptar esse código para abrir usando um <input type="image" ... ?
       
      Abraço !!!
      <script type="text/javascript"> $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) </script> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Janela Modal</h4> </div> <div class="modal-body"> <p>Texto<br> Mais Texto<br> </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  
    • By Kouta
      Olá estou tendo problemas para compilar e instalar o bootstrap em minhas paginas web, sei que no site do próprio framework existe uma versão já compilada nos arquivos para download, já tenho ela baixada e descompactada na pasta do site e com os devidos links para chamar o css e javascript para a pagina a ser carregada mas ainda sim o botstrap não aplicado a pagina.
       
      <!doctype html> <html lang="pt-br"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="/css/bootstrap.css"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html> Segue uma imagem com o caminho até o arquivo bootstrap.css dentro da pasta css na pasta do site.
      O caminho esta correto mesmo assim ele não atribui o arquivo a pagina subsequentemente não a estiliza.
      O mesmo ocorre quando chamo o javascript que baixei já compilado mas nessa versão deixei o do CDN apenas para ver se funcionava esta rodando apena do CDN.
       
      Compilei eu mesmo usando aplicativos de compilação de sass mesmo assim ele não atribui a estilização a pagina poderia me dizer se este código BASE esta errado ou desponibilizar algum exemplo de um arquivo em que a ligação do bootstrap a uma pagina web esta feita corretamente.
       
      Agradeço desde já a quem puder ajudar!

    • By ianluis
      Layout Responsivo Desalinhado: Estou criando um site de filmes e a cada momento que incluo algo o layout se estica para a direita ficando impossível de concertar sou novato e não sei onde estou errando me ajudem.
       
      Estou tentando criar um site de filmes responsivo mais o layout estar completamente desalinhado estirando a todo momento que incluo alguma  imagem para a direita me ajudem por favor.
       
       
      Codigo CSS abaixo:
       
      *{
          
        padding: 0px;
        margin: 0px;
      }
      a{
          text-decoration:none;
          color:#999;
      }
      body{
          font-family: arial;
          color:#eaeeef;
          background-color: #36454f; /*Fundo Escur0*/ 
          margin-left: -100px;
          margin-top: -16px;

      }
      .font400{
      font-size: 4em;

      }
      .font350{
      font-size: 3.5em;
      }     

      .font300 {
      font-size: 3em;
      }
      .font200 {
      font-size: 2em;
      }
      .font180 {
      font-size: 1.8em;
      }
      .font12{
          font-size:12px;
      }

      .font10{
          font-size:10px;
      }
      .font18{
          font-stretch: 18px;
      }
      .branca{
          color:#FFFFFF
      }

      .cinza {
          color: #CBCCCD;
      }
      .vermelho_1{
          color:#ff0000;
      }
      ul{
          list-style:none;
      }
      /*Imagem do Menu*/
      img{
          width:35px;
          margin-left: 100px;
          margin-top: 10px;
          
      }
      input[type="checkbox"]
          
      {
          display:none;
      }
      nav
      {
          background-color: rgba(16,16,16,.5);
          width:150px;
          height:100%;
          left: -150px;
          position: absolute;
          transition: all .5s;
          
          
      }
      input[type="checkbox"]:checked ~ nav
      {
          transform: translateX(150px);
      }
      ul{
          top:80px;
          position:absolute;
          width: 100%;
      }
      a{
          
          background: block;
          padding:10px 5px;
          color: white;
      }
      a:hover{
           background-color: rgba();
           color: black;
      }
      label{
          padding: 15px;
          position: absolute;
          z-index:1;
          /*icone*/
      }

      /* Formatação de chamada principal da imagem em destaque*/
      .chamada{
          background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://img.youtube.com/vi/NOEQ7wVKIew/maxresdefault.jpg);
          background-position: center center; /* Centraliza a imagem no centro da tela*/
          background-repeat: no-repeat;/* Não repete a imagem*/
          background-size: cover; /* Ocupa toda a tela sem distorcer a imagem*/
          background-attachment: fixed;
          height: 100vh; /*100% do view height*/
          display: flex; 
      }   
      .area_chamada {
          margin: auto;
          margin-bottom:150px;
          text-align: center;
      }
      h2 {
          margin: 0px;
      }
      .titulo{
           font-family: 'Open Sans', sans-serif;
           text-transform: uppercase;
           line-height: 1.1em;
           font-weight: 400;
           text-shadow: 2px 3px 0px rgba(0,0,0,.8);
           color: #CBCCCD;
           
           
      }
      .subtitulo{
          font-family: 'Open Sans', sans-serif;
          text-transform: uppercase;
          line-height: 1.1em;
          font-weight: 400;
          text-shadow: 2px 3px 0px rgba(0,0,0,.8);
          height: 80px;
      }
      .parte_superior{
          /*banner de 280px na largura e 120px*/
          width: 100vw;
          height: 0px;
          display: flex;
          align-items: center;
          margin-top: 17px;
          margin-left: 50px;

      }
      /*imagem do logo*/
      .logo> img {
           width:250px;
           margin-top: 0px ;
                margin: 160px;
           
      }
      .pesquisa {
       width:500px;
       height:40px;
       margin:200px auto;
       display: flex;
       margin-top: 80px;
       margin-left: 40px;
       border-bottom-width: 2px;
      }
      #texto {
       width:520px;
       height:50px;
       float:left;
       font-family:Arial, Helvetica, sans-serif ;
       font-size:18px;
       background: #151515;
       border: #151515;
       border-radius: 6px 0px 0px 6px;
       display: flex;
       color: white;
       justify-content: space-around;
       
      }
      #texto:focus {
       border: solid 2px #1f1f1f;

      }
      .btn {
       height:34px;
       width:17px;
       background:#ff0000;
       padding:6px 8px;
       cursor:pointer;
       display: flex;
       margin-top: -10px;
       border: solid 0px #ff0000;
       border-radius: 0px ;
       margin-left: 0px;
       
      }
      button{
          padding: 12px;
          border-width: 0px;
          border-radius: 0px 6px 6px 0px;
          height: 50px;
          background: #ff0000;
          width: 60px;
      }
         
         /*Move todo o Slide*/
      .miniaturas{
          
           height: 290px;
               width: 180px;
               display: flex;
               padding: 0px 2%;
               margin-top: -250px;
               margin-left: 90px;
               margin-top: -100px;
      }
      /*Move todo o menu do slide*/
      .horizontal{
             display: flex;
             justify-content: center ;
              margin-left: 70px;
             justify-content: space-around;
             width: 200px;
             color: dimgrey;
             margin-top: 450px;
              
      }
      .ativo{
          margin:0px;
          color:white;
      }
           
         .black_clover> img{
               
               height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;
               }
      .black_clover > img:hover{
          opacity: 0.2;
      }

      .one_punch_man> img{
               height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
                position: relative;
               z-index: 1;
               transition: all 0.5s linear;
        }     
          .one_punch_man > img:hover{
          opacity: 0.2;
      }
      .Dororo> img{
          height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
                position: relative;
               z-index: 1;
               transition: all 0.5s linear;
        }     
          .Dororo > img:hover{
          opacity: 0.2;
      }
      .shingek_3>img{
            height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
                position: relative;
               z-index: 1;
               transition: all 0.5s linear;

        }     
          .shingek_3 > img:hover{
          opacity: 0.2;
      }
      .Mob>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
                position: relative;
               z-index: 1;
               transition: all 0.5s linear;

        }     
          .Mob > img:hover{
          opacity: 0.2;

      }
      .kimetsu_no_yaiba>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Kimetsu_no_yaiba > img:hover{
          opacity: 0.2;  
      }
      .figuras {
          display: flex;
          margin-left: 50px;
          justify-content: space-between;
          padding: 4%;
          height: 290px;
          width: 180px;

          
          }
              figure {
                    margin: 0px;
                    display: flex;

      }
      figcaption{
          width: 180px;
          height: 290px;
          background-color: black;
          display: flex;
          min-height:290px;
          margin: 10px;
          margin-top: -300px;
          
      }

      .grana{
          display: flex;
      }
      .baner{
          padding-top:   100px;
          display: flex;
          
      }
      /*move o banner e a primeira coluna de animes*/
      .bittube>a>img{
          display: flex;
          width: 400px;
          margin: 0px 580px; 
          margin-top: 20px;

      }
      .posts{
          margin-top:  100px;
          padding: 0px -400px;
          display: flex;
          margin-left: 180px;
          

      }
      .primeira{
          display: flex;
      }

      .primeira > ul > li{
          display:inline-block;
          margin-top: 1220px;
          margin-left: 20px;
      }

      .One_Piece>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .One_Piece> img:hover{
          opacity: 0.2;  
      }
      .tate_no_yusha>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .tate_no_yusha> img:hover{
          opacity: 0.2;  

      }
      .naruto_shippuden>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .naruto_shippuden> img:hover{
          opacity: 0.2;  

      }
      .Nanatsu_no_taizai>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Nanatsu_no_taizai> img:hover{
          opacity: 0.2;  

      }
      .dragon_ball_super>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .dragon_ball_super> img:hover{
          opacity: 0.2;  

      }
      .boku_no_hero_academia>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .boku_no_hero_academia> img:hover{
          opacity: 0.2;  
      }
       /*Move toda a segunda coluna de animes*/
      .coluna{
          margin-top:   50px ;
          margin-left: 180px;
          display: flex;
      }
      .segunda{
          display: flex;

      }

      .boruto>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .boruto> img:hover{
          opacity: 0.2;  

      }

      .isekai_maou>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .isekai_maou> img:hover{
          opacity: 0.2;  

      }

      .bleach>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .bleach> img:hover{
          opacity: 0.2;  

      }

      .fairy_tail>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .fairy_tail> img:hover{
          opacity: 0.2;  
      }

      .tensei_shitara>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .tensei_shitara> img:hover{
          opacity: 0.2;  
      }

      .Tokyo_Ghoul>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Tokyo_Ghoul> img:hover{
          opacity: 0.2;  

      }
       /*Move toda a  coluna de séries*/
      .coluna_series{
          margin-top:   120px ;
          margin-left: 180px;
          display: flex;
      }
      .primeira_series{
          display: flex;

      }

      .primeira_series > ul > li{
          display:inline-block;
          margin-top: 2020px;
          margin-left: 20px;
      }

      .Atirador>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Atirador> img:hover{
          opacity: 0.2;  
      }

      .Game_of_thrones>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Game_of_thrones> img:hover{
          opacity: 0.2;  
      }

      .La_casa_de_papel>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .La_casa_de_papel> img:hover{
          opacity: 0.2;  
      }

      .lucifer>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .lucifer> img:hover{
          opacity: 0.2;  
      }

      .sons_of_anarchy>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .sons_of_anarchy> img:hover{
          opacity: 0.2;  
      }

      .vikings>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .vikings> img:hover{
          opacity: 0.2;  

      }
       /*Move toda a  coluna de séries*/
      .coluna_series2{
          margin-top:   50px ;
          margin-left: 180px;
          display: flex;
      }
      .segunda_series2{
          display: flex;

      }

      .segunda_series2 > ul > li{
          display:inline-block;
          margin-top: 2020px;
          margin-left: 20px;
      }

      .The_purge>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .The_purge> img:hover{
          opacity: 0.2;  
          }

      .titans>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .titans> img:hover{
          opacity: 0.2;  
          }

      .the_big_bang_theory>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .the_big_bang_theory> img:hover{
          opacity: 0.2;  
          }

      .o_último_guardião>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .o_último_guardião> img:hover{
          opacity: 0.2;  
          }

      .legends_of_tomorrow>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .legends_of_tomorrow> img:hover{
          opacity: 0.2;  
          }

      .chernobyl>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .chernobyl> img:hover{
          opacity: 0.2;  

      }
       /*Move toda a  coluna de séries*/
      .coluna_fimes{
          margin-top:   120px ;
          margin-left: 180px;
          display: flex;
      }
      .segunda_filmes{
          display: flex;

      }

      .segunda_filmes > ul > li{
          display:inline-block;
          margin-top: 2820px;
          margin-left: 20px;
      }

      .avangers_Age>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .avangers_Age> img:hover{
          opacity: 0.2;  
          }

      .capitan_marvel>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .capitan_marvel> img:hover{
          opacity: 0.2;  
      }

      .capitao_america>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .capitao_america> img:hover{
          opacity: 0.2;  
          }

      .guerra_civil>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .guerra_civil> img:hover{
          opacity: 0.2;  
          }
      .doutor_estranho>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .doutor_estranho> img:hover{
          opacity: 0.2;  
          }

      .hulk_o_inacreditavel>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .hulk_o_inacreditavel> img:hover{
          opacity: 0.2;  
          }
      .coluna_fimes1{
          margin-top:   50px ;
          margin-left: 180px;
          display: flex;
      }
      .segunda_filmes1{
          display: flex;

      }

      .segunda_filmes1> ul > li{
          display:inline-block;
          margin-top: 2820px;
          margin-left: 20px;
      }
      .iron_man>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .iron_man> img:hover{
          opacity: 0.2;  
          }
          .thor>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .thor> img:hover{
          opacity: 0.2;  
          }
          .a_lenda_do_golem>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .a_lenda_do_golem> img:hover{
          opacity: 0.2;  
          }
          .maligno>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .maligno> img:hover{
          opacity: 0.2;  
          }
          .as_trapaceiras>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .as_trapaceiras> img:hover{
          opacity: 0.2;  
          }
          .homem_de_ferro2>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .homem_de_ferro2> img:hover{
          opacity: 0.2;  
          }

          .rodape{
              padding: 25px;
              color: white
              font-size:1.5em;
              display: flex;
              padding-top:   3600px;
              padding-left: 350px;

          }
          .rodape li{
              margin-right:20px;
              padding-top: 50px;
              
          }
          .parceria{
              display: flex;
              padding-top:   3600px;
              padding-left: 350px;
              }
          .parceria li{
              margin:-20px 10px;
              display:flex;
       
       
       
      <<<<<<<<Codigo Html abaixo>>>>>>>>
    • By marcelocardoso
      olá pessoal.

      Estou disponibilizando um script para paginação de noticias, ele funciona, porém, ao adaptar codigo usado da internet, não encontrei maneiras de LIMITAR os REGISTROS.
      Se alguém quiser contribuir, na parte da paginação, agradeço.

      preciso limitar os registros em 10 em 10 a paginação
      primeiro < 1 2 3 4 5 6 7 8 9 10 > ultimo

       
      <section class="container-fluid"> <div class="row mb-5"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-5"> <h1 class="text-center"> Informações e noticias </h1> <h3 class="text-center"> Atualizações diárias de conteúdos advocatícios e judiciais </h3> </div> <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-xs-12 mt-2 p-5" style="height: auto;"> <% IF IsEmpty(Request.QueryString("idnot")) OR IsNull(Request.QueryString("idnot")) THEN SQL1 = "SELECT * FROM dbluz_noticias ORDER BY id DESC LIMIT 1" ELSE SQL1 = "SELECT * FROM dbluz_noticias WHERE id = "& Request.QueryString("idnot") &" ORDER BY id DESC LIMIT 1" END IF SET strNoticias = Server.CreateObject("ADODB.Recordset") strNoticias.Open SQL1, conexao, 3, 3 IF strNoticias.EOF THEN %> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"> <h1>AVISO!</h1> <h4 style="color: green;"> Não existem noticias cadastradas no momento, <br> ou não existe registro para este ID informado. </h4> </div> <% ELSE DO WHILE NOT strNoticias.EOF %> <div class="box-noticias-data"> <%=strNoticias("dbluz_data")%> </div> <div class="box-noticias-subtitulo"> <%=strNoticias("dbluz_subtitulo")%> </div> <div class="box-noticias-titulo mt-4"> <%=strNoticias("dbluz_titulo")%> </div> <div class="box-noticias-descricao mt-5 text-justify"> <%=strNoticias("dbluz_descricao")%> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right box-noticias-fonte line-dotted-top mt-3 mb-5 p-2"> <span class="mb-5 mt-2 p-2 bg-success"> <a href="index.asp?idnot=<%=strNoticias("id")%>" role="button" class="btn btn-clean"> <span class="fa fa-print fa-1x font-color-var1"></span> </a> </span> </div> <% strNoticias.MoveNext Loop SET strNoticias = Nothing %> </div> <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12 mt-5 p-0"> <% SQL2 = "SELECT * FROM dbluz_noticias " SET strNoticiasBlocos = Server.CreateObject("ADODB.Recordset") strNoticiasBlocos.Open SQL2, conexao, 3, 3 IF strNoticiasBlocos.EOF THEN %> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"> <h1>AVISO!</h1> <h4 style="color: green;">Não existem noticias cadastradas no momento, <br> ou não existe registro para este ID informado.</h4> </div> </div> <% ELSE ItensExibidos = 1 'Qtde de Itens' NumeroDaPagina = Request.QueryString("pg") IF NumeroDaPagina = "" THEN NumeroDaPagina = 1 TotalDeRegistros = UBound(strNoticiasBlocos.GetRows,2)+1 InicioDaPagina = ((ItensExibidos*NumeroDaPagina)-ItensExibidos) FinalDaPagina = ItensExibidos IF TotalDeRegistros <= ItensExibidos THEN PaginaTotal = 1 ELSEIF (TotalDeRegistros MOD ItensExibidos = 0) THEN PaginaTotal = (TotalDeRegistros/ItensExibidos) ELSE PaginaTotal = (TotalDeRegistros/ItensExibidos) + 1 PaginaTotal = Cint(PaginaTotal) END IF strNoticiasBlocos.close SQL3 = SQL2 & "WHERE id != (SELECT max(id) FROM dbluz_noticias) ORDER BY id DESC LIMIT "& InicioDaPagina &" , "& FinalDaPagina &"" strNoticiasBlocos.Open SQL3, conexao, 3, 3 %> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-2"> <% DO WHILE NOT strNoticiasBlocos.EOF %> <div class="box-noticias-data-min"><%= strNoticiasBlocos("dbluz_data")%></div> <div class="box-noticias-titulo-min mt-1 mb-1"> <a href="index.asp?idnot=<%=strNoticiasBlocos("id")%>" class=""> <%= strNoticiasBlocos("dbluz_titulo")%> </a> </div> <div class="box-noticias-descricao-min hidden-sm hidden-xs mb-4 line-dotted-top"> <%= LEFT(strNoticiasBlocos("dbluz_descricao"),200)%> </div> <% strNoticiasBlocos.MoveNext Loop %> </div> <% END IF END IF %> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-md-12 col-xs-12"> <ul class="pagination pagination-sm"> <% IF Cint(NumeroDaPagina) = 1 THEN %> <li class="page-item disabled"> <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a> </li> <li class="page-item disabled"> <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a> </li> <% ELSE %> <li class="page-item"> <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a> </li> <li class="page-item"> <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a> </li> <% END IF %> <% FOR intID = 1 TO PaginaTotal IF intID = Cint(NumeroDaPagina) 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="?pg=<%=intID%>"> <%=intID%> </a> </li> <% END IF NEXT %> <% IF Cint(NumeroDaPagina) = PaginaTotal THEN %> <li class="page-item disabled"> <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a> </li> <li class="page-item disabled"> <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a> </li> <% ELSE %> <li class="page-item"> <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a> </li> <li class="page-item"> <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a> </li> <% END IF %> </ul> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-md-12 col-xs-12"> <div class="text-right p-1" style="font-size: 10px;"> Navegando na página <b id="barra_numero"><%= NumeroDaPagina %></b> de <b id="barra_total"><%= PaginaTotal %></b> </div> <div class="text-right p-1" style="font-size: 10px; color: dimgray;"> TOTAL DE <b id="barra_registro"><%= TotalDeRegistros %></b> REGISTROS </div> </div> </div> </div> </section> CODIGO DA PAGINACAO EXTRAIDO DA PARTE DE CIMA, a parte que preciso ajustar....

       
      <ul class="pagination pagination-sm"> <% IF Cint(NumeroDaPagina) = 1 THEN %> <li class="page-item disabled"> <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a> </li> <li class="page-item disabled"> <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a> </li> <% ELSE %> <li class="page-item"> <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a> </li> <li class="page-item"> <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a> </li> <% END IF %> <% FOR intID = 1 TO PaginaTotal IF intID = Cint(NumeroDaPagina) 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="?pg=<%=intID%>"> <%=intID%> </a> </li> <% END IF NEXT %> <% IF Cint(NumeroDaPagina) = PaginaTotal THEN %> <li class="page-item disabled"> <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a> </li> <li class="page-item disabled"> <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a> </li> <% ELSE %> <li class="page-item"> <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a> </li> <li class="page-item"> <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a> </li> <% END IF %> Desde já obrigado...
       
×

Important Information

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