一:分页导航栏
com.github.pagehelper
pagehelper
5.1.2
2.Dao XML设置插件对象
oracle
true
3.在实现查询SQL语句紧邻的上一行开启分页工具,传入参数(当前页码,每页的数量)
/**
* 查询所有订单信息
* @return
*/
@Override
public List findAll(int pageNum,int pageSize) {
PageHelper.startPage(pageNum,pageSize);
return ordersDao.findAll();
}
4.Controller层
当前页码可根据浏览器端传入,根据需求设置默认每页显示数量.
创建PageInfo实例对象,构造参数传入每页查询的结果集.将pageBean响应给jsp页面.
@RequestMapping("/findAll.do")
public ModelAndView findAll(int pageNum,@RequestParam(defaultValue = "4") int pageSize) {
ModelAndView mav = new ModelAndView("orders-list");
List list = ordersService.findAll(pageNum, pageSize);
//插件pageInfo对象,将查询到的订单信息集合放入构造函数
PageInfo pageInfo = new PageInfo(list);
mav.addObject("pageInfo", pageInfo);
return mav;
}
页面切换按钮采用超链接形式实现,在地址栏上携带pageBean的参数,将当前页码返回给Controller层,实现查询和页面跳转.
中间显示实际页数通过标签foreach循环遍历pageBean总页码显示.
二:页面显示设定
效果图
显示总页数,信息条数,选择每页选择显示条数.
标签代码和javaScript代码
这里controller层参数设定了默认值,无法保持每页都显示对应的记录条数,需要进行部分修改.
总共${pageInfo.pages}页,共${pageInfo.total}条数据。 每页
条
function changePageSize() {
//获取下拉框的值
var pageSize = $("#changePageSize").val();
//向服务器发送请求,改变每页显示条数
location.href = "${pageContext.request.contextPath}/orders/findAll.do?pageNum=1&pageSize=" + pageSize;
}
注:这里会出现无法选择页面显示行数为默认行数,在不设置默认值情况下默认为每页显示1条,并不会随着当前页面实际显示条数变化.
同时,无法选择显示为默认的1条数据,因为他是默认值,每次跳转该页面都是默认为1,所以即使选择了显示1行数据,但是option的值并没有发生改变,onchange()方法是选项发生改变时传入被修改的val.
修改思路:
在页面刷新显示后,修改当前选项框的默认选中值为上一次改变的值即可.
(小细节)–>
jQuery eq() 方法 返回带有被选元素的指定索引号的元素。
索引号从 0 开头,所以第一个元素的索引号是 0(不是 1)。
script代码: