html页面
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/plugins/page/page.css" />
</head>
<body>
<!-- 分页开始 -->
<div id="page_navigation">
<input type="hidden" id="currentPage" th:value="${currentPage}">
<input type="hidden" id="pageSize" th:value="${pageSize}">
<input type="hidden" id="totalNum" th:value="${totalNum}">
<input type="hidden" id="queryParams" th:value="${queryParams}">
</div>
<!-- 分页结束 -->
<script type="text/javascript" src="/plugins/page/page.js"></script>
</body>
</html>
样式page.css
#page_navigation{
float: right;
margin-top: 10px;
}
#page_navigation a{
padding:3px;
border:1px solid gray;
margin:2px;
color:black;
text-decoration:none
}
#page_navigation .active_page{
background:darkblue;
color:white !important;
}
js脚本文件
$(document).ready(function(){
//每页显示的数目
var pageSize = $('#pageSize').val();
//获取总的数据量
var totalNum = $('#totalNum').val();
//当前页
var currentPage = $('#currentPage').val();
//计算页面显示的数量
var number_of_pages = Math.ceil(totalNum/pageSize);
var navigation_html = '<a class="previous_link" href="javascript:previous();">上一页</a>';
var current_link = 0;
while(number_of_pages > current_link){
navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
}
navigation_html += '<a class="next_link" href="javascript:next();">下一页</a>';
$('#page_navigation').html(navigation_html);
/*get the page link that has longdesc attribute of the current page and add active_page class to it
and remove that class from previously active page link*/
$('.page_link[longdesc=' + currentPage +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
});
//上一页
function previous(){
new_page = parseInt($('#currentPage').val()) - 1;
//if there is an item before the current active link run the function
if($('.active_page').prev('.page_link').length==true){
go_to_page(new_page);
}
}
//下一页
function next(){
new_page = parseInt($('#currentPage').val()) + 1;
//if there is an item after the current active link run the function
if($('.active_page').next('.page_link').length==true){
go_to_page(new_page);
}
}
//跳转某一页
function go_to_page(page_num){
var queryParams = $('#queryParams').val();
window.location.href="/app?page="+page_num+"&"+queryParams;
}