1、介绍
jQuery Pagination Plugin for Bootstrap 这个 jQuery 插件简化了 Bootstrap 分页功能的使用。它使用适当的类:.pagination, .active 和 .disabled。下载地址
最简单的demo :
<!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>
显示效果
2、借助AJAX请求时使用
界面上:
<ul class="pagination pagination-sm pull-right"> </ul>
引入:
<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">
调用:
//发送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)
效果图:
3、如果需要支持动态数据变化时,需要调用destroy方法
简单demo
<!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>
需要ajax请求的demo
//初始化当前页码
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)