layPage分页示例

效果如下：

HTML代码：

引入：

<link rel="stylesheet" href="${pageContext.request.contextPath}/paynews/css/laypage.css">

<script src="${pageContext.request.contextPath}/paynews/js/laypage.js" type="text/javascript"></script> 

//总页数
<input type="hidden" name="total" value="${page.total}" id="total">
//当前页
<input type="hidden"  value="${num}" id="num">
//分页容器显示的地方
<div id="fenye" style="float: right;"></div>

js代码：

<script type="text/javascript">
var totalNum= document.getElementById('total').value;
var nums = 5; //每页出现的数量
var pages = Math.ceil(totalNum/nums); //得到总页数
var currpage=document.getElementById("num").value;
//调用分页
laypage({
  cont: 'fenye',//分页容器的id
  pages: pages, //总页数
  curr:currpage, //当前页
  skin: 'yahei',  //当前页的颜色
  jump:function(e,first){
	  if(!first){
	 	location.href = '#?pageNumber='+e.curr;
	  }
  }
});
</script>

后台只需要接收pageNumer的值。

js文件和css下载的地址：点击打开链接

学习更多：点击打开链接