分页功能十分常见,完全前端实现的话可能会比较麻烦,如果能结合后台的pageinfo就会方便很多,只需要写一下创建页码按钮,样式改变,传值等就可以了。
html部分
ps:分页按钮的样式用了bootstrap
<div id="pagination-2">
<!-- 分页信息 -->
<div id="pagination-inform-2" style="display: none">
<span id="firstPage-2">1</span>
<span id="lastPage-2">${P_rPageInfo1.pages}</span>
<span id="prePage-2">${P_rPageInfo1.prePage}</span>
<span id="nextPage-2">${P_rPageInfo1.nextPage}</span>
<span id="isFirstPage-2">${P_rPageInfo1.isFirstPage}</span>
<span id="isLastPage-2">${P_rPageInfo1.isLastPage}</span>
<span id="pageNum-2">${P_rPageInfo1.pageNum}</span>
</div>
<!-- 分页按钮 -->