<%@page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<base
href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
<meta charset="UTF-8">
<%-- jquery --%>
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<%--bootstrap --%>
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<%-- pagination plugin --%>
<link href="jquery/bs_pagination/jquery.bs_pagination.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination/en.min.js"></script>
<script type="text/javascript">
$(function(){
var pageNo = 1;
var pageSize = 5;
var total = 37;
// js中parseInt()函数用来取整
var totalPages = (total % pageSize == 0 ? total / pageSize : parseInt(total / pageSize) + 1);
$("#pagination").bs_pagination({
// options
currentPage: pageNo, // 页码
rowsPerPage: pageSize, // 每页显示的记录条数
maxRowsPerPage: 50, // 每页最多显示的记录条数
totalPages: totalPages, // 总页数
totalRows: total, // 总记录条数
visiblePageLinks: 3, // 设置显示的卡片个数
showGoToPage: true,
showRowsPerPage: true,
showRowsInfo: true,
onChangePage : function(event , data){
// 翻页时被调用。
alert(data.currentPage + "," + data.rowsPerPage);
}
});
});
</script>
</head>
<body>
<div id="pagination"></div>
</body>
</html>