这种方式的分页,基本上分页逻辑都由laypage去实现了,后端分页逻辑基本上不用过多考虑。还是比较方便的,建议结合官网的文档和代码进行理解。下面是实现代码:
1.前端HTML代码:
//此处是显示数据的具体HTML代码 <div></div> //分页显示的位置
2.Js代码:
这部分的分页实现,后端只需返回总页数即可。
function paging(){ $.getJSON('/weekly-page-count',{},function(res){ //整页刷新 laypage({ cont: 'page-list', pages: res, //可以叫服务端把总页数放在某一个隐藏域,再获取。假设我们获取到的是18 curr: function(){ //通过url获取当前页,也可以同上(pages)方式获取 var page = location.search.match(/page=(\d+)/); return page ? page[1] : 1; }(), skip: true, jump: function(e, first){ //触发分页后的回调 if(!first){ //一定要加此判断,否则初始时会无限刷新 location.href = '?page='+e.curr; } } }); }); } paging();
3.后端代码–controller部分:
/** * 功能描述:返回无查询条件查询分页数--用户 * @param page * @return * @since */ @RequestMapping(value="/weekly-page-count") @ResponseBody public Integer getPage1(Integer userId){ Integer count = weeklyService.getPageCount(userId); return count; }
4.后端代码–service部分:
/** * 功能描述:总页数 * @param userId * @return * @since */ public Integer getPageCount(Integer userId){ int count = 0; count = weeklyMapper.getPageCount(userId); int pageSize = 5; //每页显示条数 int page = count%pageSize == 0 ? count/pageSize : count/pageSize + 1; //计算页数 return page; }
5.后端代码–dao部分:
/** * 功能描述:无条件查询记录条数==分页总数 * @param userId * @return * @since */ @Select("SELECT count(1) AS pageTotal FROM weekly WHERE user_id = #{userId}") Integer getPageCount(@Param("userId") Integer userId);
总结:两种分页方式使用起来都是比较方便的。使用的场景还是有些不同:异步式适合JQuery重写页面比较容易的;整页式更简单,各种场景都可以使用。