简单的web端分页实现
第一步:在制作某些web端的网页时,常常会用到对内容进行分页管理的功能,让页面布局更加简洁,接下来就跟大家分享一个笔者在平时开发时经常用到的一个分页模板。直接上代码:
1}">< 上一页 0}">${article.current-3} 0}">${article.current-2} 0}">${article.current-1} ${article.current} <c:if test="${article.current+1 ${article.current+1} <c:if test="${article.current+2 ${article.current+2} <c:if test="${article.current+3 ${article.current+3} <c:if test="${article.current 下一页 > 每页:${article.size}条/共:${article.total} 条
需要说明一下:下面这一行是我后段查出来的内容,在前段进行遍历展示,而且这个article对象在后台是根据spring自带的分页工具查出来的(一定是page对象进行分页,page里面是多个article对象)。
1}">< 上一页 0}">${article.current-3} 0}">${article.current-2} 0}">${article.current-1} ${article.current} <c:if test="${article.current+1 ${article.current+1} <c:if test="${article.current+2 ${article.current+2} <c:if test="${article.current+3 ${article.current+3} <c:if test="${article.current 下一页 >
调整这里的可调整页面上的页面按钮。如图:
第二步:最后通过每页的onclick事件请求后台进行请求,单独处理js
function page(index) { location.href = "${jtFront}/view-${category.id}?index=" + index + "&webType=fp"; }
第三步:将index参数代入到后台方法中,就看他使用page对象请求分页的数据(webType是我自己为了区别方法返回值的参数,这里不用管它),如图后台方法示例
public String articleErji(Model model, @PathVariable String categoryId, @RequestParam(required = false) Integer index,String webType):这是方法签名,将index进行入参//方法体内的内容Page cmsArticleDTOPage = null; if(index == null) { cmsArticleDTOPage = new Page(1, 5); }else { cmsArticleDTOPage = new Page(index,5); }使用page对象进行查询
最后羽绒棉效果:
页数可通过第一步进行调整。