前提:我已经实现了数据库的查询功能
详情见博文:https://blog.csdn.net/weixin_42493072/article/details/94403204
开发工具
IntelliJ IDEA 2018
JDK1.8
tomcat 7.0.79
Mysql 5.0
Maven 3.6.0
开发步骤
- 1.在pom.xml中引入分页插件的资源位置
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.2</version>
</dependency>
- 2.在applicationContext.xml中配置分页插件
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageInterceptor">
<property name="properties">
<props>
<prop key="helperDialect">mysql</prop>
<prop key="resonable">true</prop>
</props>
</property>
</bean>
</array>
</property>
- 3.UserInfo.java实体类的实现
package com.bean;
public class UserInfo {
private int id;
private String password;
private String username;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
@Override
public String toString() {
return "com.zhongruan.bean.UserInfo{" +
"id=" + id +
", password='" + password + '\'' +
", username='" + username + '\'' +
'}';
}
}
- 4.DAO层实现的方法
public interface IUserDao {
public List<UserInfo> findall();
}
- 5.Service层实现的方法
IUserService.java
public interface IUserService {
List<UserInfo> findall(int page, int size);
}
UserService.java
@Service
public class UserService implements IUserService {
@Autowired
private IUserDao userDao;
@Override
public List<UserInfo> findall(int page, int size) {
PageHelper.startPage(page,size);
return userDao.findall();
}
}
- 6.jsp页面负责显示数据,实现分页效果
主页面标签栏:
(点击“用户管理”标签,显示第一页的用户信息:page=1,每页5条信息:size=5)
<ul class="treeview-menu">
<li id="system-setting">
<a href="${pageContext.request.contextPath}/user/findAll.do?page=1&size=5">
<i class="fa fa-circle-o"></i> 用户管理
</a>
</li>
<li id="system-setting">
<a href="#">
<i class="fa fa-circle-o"></i> 角色管理
</a>
</li>
</ul>
user-list.jsp中显示用户信息的列表:
<!--数据列表-->
<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="" style="padding-right: 0px">
<input id="selall" type="checkbox" class="icheckbox_square-blue">
</th>
<th class="sorting_asc">ID</th>
<th class="sorting_desc">用户名</th>
<th class="sorting_asc sorting_asc_disabled">密码</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<c:forEach var="user" items="${ps.list}">
<tr>
<td><input name="ids" type="checkbox"></td>
<td>${user.id}</td>
<td>${user.username}</td>
<td>${user.password}</td>
<td class="text-center">
<a href="${pageContext.request.contextPath}/user/toUpdate.do?id=${user.id}" class="btn bg-olive btn-xs">更新</a>
<a href="${pageContext.request.contextPath}/user/delete.do?id=${user.id}" class="btn bg-olive btn-xs">删除</a>
<a href="#" class="btn bg-olive btn-xs">添加角色</a>
</td>
</tr>
</c:forEach>
</tbody
</table>
<!--数据列表/-->
<!---------------上下页、首尾页设置-------------------------------->
</div>
<div class="box-tools pull-right">
<ul class="pagination">
<li><a href="${pageContext.request.contextPath}/user/findAll.do?page=1&size=5" aria-label="Previous">首页</a></li>
<li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${ps.pageNum-1}&size=5">上一页</a></li>
<c:forEach begin="1" end="${ps.pages}" var="pageNumber" >
<li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageNumber}&size=5">${pageNumber}</a></li>
</c:forEach>
<li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${ps.pageNum+1}&size=5">下一页</a></li>
<li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${ps.pages}&size=5" aria-label="Next">尾页</a></li>
</ul>
</div>
</div>
- 7.UserController.java中实现页面跳转
@RequestMapping("/findAll.do")
public ModelAndView findall(@RequestParam(defaultValue = "1") int page, @RequestParam(defaultValue = "5")int size) {
List<UserInfo> all = userService.findall(page, size);
PageInfo pageInfo= new PageInfo(all);
ModelAndView mv=new ModelAndView();
mv.addObject("ps", pageInfo);
mv.setViewName("/user-list");
return mv;
}
运行结果