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 Jefferson andre
      Ola,
      Tenho uma variavel que vem do mysql e contem informacoes.
       
      No mysql o campo esta definido como datetime
       
      No bootstrap 4 esta da seguinte maneira 
      <div class="form-group col-md-3"> <label for="inputCelular">Data e hora de saida</label> <input type="datetime-local" name="data_saida" id="data_saida" value="<?php echo $data_saida;?>" class="form-control" aria-label="" aria-describedby="inputGroup-sizing-sm"> </div> O que pode estar incorreto ?
       
      Agradeco pela ajuda
    • By Marxrj
      Olá a todos!,
      Queria aqui uma dica se alguém sabe como alinhar fotos no centro pelo bootstrap.
      Usando o padrão fotos retratos fica como abaixo
      __________  __________
      __________
       
      Mas eu queria que quando tivesse um número impar, a foto não ficasse alinhada na esquerda e sim centralizada como abaixo
      __________  __________
                __________
       
      Estou usando este padrão abaixo aonde ele alinha duas fotos ao lado, mas quando tem somente um ou em número impar, essa não centraliza e sim fica a esquerda.
      <div class="col-xs-12 col-sm-10 col-lg-6 col-md-3">
    • By manolegal
      Boa tarde
      Gostaria de colocar o valor de um campo bootstrap/vue.js em uma variável php, porém não estou conseguindo. É a primeira vez que estou trabalhando com vue.
      O campo está trazendo o valor correto:
      <section class="scans"> <h2>Scans</h2> <ul v-if="scans.length === 0"> <li class="empty">No scans yet</li> </ul> <transition-group name="scans" tag="ul"> <li v-for="scan in scans" key="scan.date" title="scan.content">{{ scan.content }}</li> </transition-group> </section> var app = new Vue({ el: '#app', data: { scanner: null, activeCameraId: null, cameras: [], scans: [] }, mounted: function () { var self = this; self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 }); self.scanner.addListener('scan', function (content, image) { var element = document.getElementById('valor'); element.innerHTML = content self.scans.unshift({ date: +(Date.now()), content: content }); }); Instascan.Camera.getCameras().then(function (cameras) { self.cameras = cameras; if (cameras.length > 0) { self.activeCameraId = cameras[1].id; self.scanner.start(cameras[1]); } else { console.error('Nenhuma Câmera conectada. Verifique!'); } }).catch(function (e) { console.error(e); }); }, methods: { formatName: function (name) { return name || '(unknown)'; }, selectCamera: function (camera) { this.activeCameraId = camera.id; this.scanner.start(camera); } } }); Preciso pegar o valor escaneado constante no campo, para passar para próximo formulário. No aguardo.
    • By joicitias
      Bom dia, 
      Ainda sou novata na área e estou criando um site com Bootstrap , JavaScript , e gostaria de uma ajuda. Crie alertas no form com o booststrap notify, entretanto a notificação de obrigatório aparece no topo da página e eu gostaria que ela aparecesse ao lado do campo. Como posso fazer isso?  


    • By Gilberto Jr
      Boa tarde;
       
      Eu estou com um probleminha aqui que eu não consegui resolver.
       
      O que eu quero, eu tenho uma pagina com 2 modal.
       
      Um modal dentro do outro.
      Exemplo: 
      Quando eu abro um MODAL, eu tenho uma botão para abrir um novo modal. Ele abre certinho, porem na hora de fechar. Eu clico no botão fechar, ele fecha os dois MODAL.
       
      E eu quero fechar somente o segundo modal que abre.
       
      Abaixo segue o meu codigo.
       
      <div class="modal fade" id="ListagemRede" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title font-weight-bold" id="exampleModalLabel">LISTA DE REDES CADASTRADAS</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="table text-center"> <thead> <tr> <th scope="col">#</th> <th scope="col">Nome Rede</th> <th scope="col">Ação</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Rede 1</td> <td> <i class="fa fa-pencil fa-2x" style="color:#FB8A52;" data-toggle="modal" data-target="#EditarRede<%=r("id")%>"></i> <!-- Modal Editar a Rede --> <div class="modal fade" id="EditarRede<%=r("id")%>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Título do modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form method="post" action="insere_rede.asp" id="forcadrede"> <div class="form-row"> <div class="form-group col-md-4"> <input type="hidden" name="master" value="1" required> <label for="inputEmail4" class="font-weight-bold">*Nome Rede</label> <input type="text" name="nome" class="form-control blocochamada text-center" id="inputEmail4" placeholder="*Nome da Rede" autocomplete="off" required> </div> <div class="form-group col-md-4"> <label for="inputEstado" class="font-weight-bold">*Grupo Coord.</label> <select id="inputEstado" name="coorden" class="form-control blocochamada text-center" autocomplete="off" required> <% set rscoord = conn.execute("select * from Inv_coord_grupo") %> <option selected>Escolher...</option> <% while rscoord.eof = false %> <option value="<%=rscoord("id")%>"><%=rscoord("nome_coordenador")%></option> <% rscoord.movenext wend %> </select> </div> <div class="form-group col-md-4"> <label for="inputCEP" class="font-weight-bold">*Contrato Qtde</label> <input type="number" name="contratoqtde" class="form-control blocochamada text-center" id="inputCEP" placeholder="Contrato Qtde" autocomplete="off" required> </div> </div> <div class="form-row"> <div class="form-group col-md-4"> <label for="inputEmail4" class="font-weight-bold">*Valor Contrato</label> <input type="text" name="vlrcontrato" class="form-control blocochamada text-center" id="vlrContrato" placeholder="*Valor Contrato" autocomplete="off" required> </div> <div class="form-group col-md-4"> <label for="inputCEP" class="font-weight-bold">*Valor Cont. Adici.</label> <input type="text" name="vlrcontadici" class="form-control blocochamada text-center" id="vlrContAdicion" placeholder="Valor Cont. Adici." autocomplete="off" required> </div> <div class="form-group col-md-4"> <label for="inputEstado" class="font-weight-bold">*Status</label> <select id="inputEstado" name="status" class="form-control blocochamada text-center" autocomplete="off" required> <option selected>Escolher...</option> <option value="1">Ativo</option> <option value="0">Desativado</option> </select> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btnfechar" data-dismiss="modal">Fechar</button> <button type="submit" class="btn btn-primary btnsubmit">Salvar</button> </div> </form> </div> </div> </div> </div> </td> </tr> </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button> </div> </div> </div> </div> Quem puder me ajudar.
       
      Att;
      Gilberto Jr
×

Important Information

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