1. Introdução
jQuery Paginação Plugin para Bootstrap jQuery plugin que simplifica o uso da função de paginação Bootstrap. Ele usa as classes apropriadas: .pagination, .active e .disabled. baixar
A demonstração mais simples:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/static/assets/vendors/bootstrap/css/bootstrap.css">
</head>
<body>
<ul id="pagination-demo" class="pagination-sm"></ul>
<script src="/static/assets/vendors/jquery/jquery.js"></script>
<script src="/static/assets/vendors/twbs-pagination/jquery.twbsPagination.js"></script>
<script>
$('#pagination-demo').twbsPagination({
totalPages: 35,
visiblePages: 7,
onPageClick: function (event, page) {
$('#page-content').text('Page ' + page);
}
});
</script>
</body>
</html>
exibição
2, usando pedido AJAX quando
A interface:
<ul class="pagination pagination-sm pull-right"> </ul>
introdução:
<script src="/static/assets/vendors/jquery/jquery.js"></script>
<script src="/static/assets/vendors/bootstrap/js/bootstrap.js"></script>
<!--插件引入-->
<script src="/static/assets/vendors/twbs-pagination/jquery.twbsPagination.js">
Chamada:
//发送AJAX请求 获取列表所需数据
function loadPageData(page){
$.getJSON('/admin/api/comments.php',{page:page},function(data){
$('.pagination').twbsPagination({
first:'«',//第一页
last:'»',//最后一页
prev:'<',//上一页
next:'>',//下一页
totalPages:data.total_pages,//总页数
visiblePages:5,//每页显示条数
//去除第一次初始化时就被触发一次
initiateStartPageClick:false,
onPageClick:function(e,page){
loadPageData(page)
}
})
//data=> {total_pages:7,comments:[]}
var html=$('#comments_tmpl').render({comments:data.comments})
$('tbody').html(html)
})
}
//获取第一页数据
loadPageData(1)
renderings:
3, se você precisa para suportar alterações de dados dinâmicos, você precisa chamar o método destroy
simples demonstração
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/static/assets/vendors/bootstrap/css/bootstrap.css">
</head>
<body>
<ul id="pagination-demo" class="pagination-sm"></ul>
<script src="/static/assets/vendors/jquery/jquery.js"></script>
<script src="/static/assets/vendors/twbs-pagination/jquery.twbsPagination.js"></script>
<script>
var $pagination= $('#pagination-demo')
function pagination(totalPages){
//先销毁之前的调用
$pagination.twbsPagination('destroy')
$pagination.twbsPagination({
totalPages: totalPages,
visiblePages: 7,
onPageClick: function (event, page) {
$('#page-content').text('Page ' + page);
}
});
}
//可以开始调用pagination(totalPages)方法了
//pagination(30)
</script>
</body>
</html>
Necessidade de demonstração pedido ajax
//初始化当前页码
var currentPage=1
function loadPageData(page){
$('tbody').fadeOut()
$.getJSON('/admin/api/comments.php',{page: page},function(data){
if(page>data.total_pages){
loadPageData(data.total_pages)
return
}
$('.pagination').twbsPagination('destroy')
$('.pagination').twbsPagination({
first:'«',//第一页
last:'»',//最后一页
prev:'<',
next:'>',
//开始页码,防止初始化之后,页码跳回第一页
startPage: page,
totalPages: data.total_pages,
visiblePages:5,
initiateStartPageClick:false,
onPageClick:function(e,page){
loadPageData(page)
}
})
//渲染数据
var html=$('#comments_tmpl').render({comments:data.comments})
$('tbody').html(html).fadeIn()
//每次加载完数据后,记录当前页码
currentPage=page
})
}
//可以开始调用loadPageData(currentPage)了
loadPageData(currentPage)