Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.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.
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.
algúem consegue dar uma luz no AJAX para buscar dados do banco MySQL????
fico agradecido...
Colegas...
Consegui resolver de outra maneira, mas mesmo assim, obrigado pelos que tentaram e se doaram em ajudar...
Muchas Gracias...
FINALIZADO
alguém.....
já fez bootpag com ASP e tem exemplo para postar...
obrigado.
e procurando, encontrei este código...
só não tenho ideia de complementar a parte do PHP, para ASP?
AJAX