您的位置: 首页  >  文章  >  在Web开发中实现写一个简单的分页功能

在Web开发中实现写一个简单的分页功能

分类: 文章 • 2024-02-20 09:38:34

如何去写一个分页的案例

在网页中我们经常会遇到需要在一页显示固定数量的信息然后在下一页同样显示固定数量的信息并用标签去链接到固定的页码，简称分页，这是我自己的理解。

分页的制作其实非常简单，几乎不需要用到思维逻辑，但是代码实现的过程对于新手来说比较考验一个功能的完整性，首先要能通过数据库在页面上正确的显示信息，才能根据分页去显示不同的信息。

本案例作为我研究过程中的一个小结，我采用MVC的方式详细介绍一下整个流程和代码的实现并解释一些语法的含义和写法，希望路过看到并学习的小伙伴能有所收获。

这是成功显示之后的页面：

在Web开发中实现写一个简单的分页功能

1.首先我们先编写实体类

这里我们使用的package为domain，简单点我们使用的类名为User

//这里不展示构造方法，如果你有lombok的jar包可以直接加入这三行代码直接构造
//@Data
//@AllArgsConstructor
//@NoArgsConstructor
public class User {
	private int id;    //用户的id
	private String account;  //用户的账户名
	private String password;  //用户的密码 
	private String name;   //用户的姓名 
	private String email;  //用户的邮件地址
}
//MVC的结构中实体类的构建不必多讲

为了分页我们要编写用于存放分页信息的类，Page Bean

@Data
@AllArgsConstructor
@NoArgsConstructor
public class PageBean<T> {	
	private List<T> list;		//用户列表
	private int currentPage;	//当前第几页	
	private int countPerPage; 	//每页的数量	
	private int totalPage;      //总页数	
	private int totalCount;     //用户总数
}

2.我们开始写Dao层的接口

Dao层的编写基于与数据库的连接，这里我使用的是C3P0连接池，连接池有很多种，跑小项目基本看不出性能的差异，自行选择就可以，Dao层我使用了接口和接口的实现类去构建Dao层方便添加和修改相关的功能。

先写Dao层的接口，这里为了演示我只给出其中的一个功能，显示，即查找，查找到了才能显示。

//查询用户的总人数
public int getCount()throws SQLException;
	
//查询指定范围内的人的信息，这里规定了需要显示的开始位置，和每一次需要显示的数量是多少
public List<User> findUserListByPage (int start,int count)throws SQLException;

3.编写Dao层接口的实现类

//查询用户的总人数
@Override
public int getCount() throws SQLException {
		// TODO Auto-generated method stub
		String sql ="select count(id) from users ;";
		QueryRunner runner = new QueryRunner(C3P0Utils.getDataSource());
		@SuppressWarnings({ "rawtypes", "unchecked" })
		Long result = (Long) runner.query(sql, new ScalarHandler());
		return result.intValue();
}
	
//查询指定范围内的人的信息
@Override
public List<User> findUserListByPage(int start, int count) throws SQLException {
		String sql = "select * from users limit ?,?;";
		QueryRunner runner = new QueryRunner(C3P0Utils.getDataSource());
		List<User> result  = runner.query(sql, new BeanListHandler<>(User.class),start,count);
		return result;
}

提前你需要建立好数据库和表格并对应好相关的字段，如果你不会建立数据库和插入数据请自行面壁思过。

4.编写Service层的接口

编写Service层我依然使用接口的方式，这里不止强调一次使用接口的好处，方便后期维护和添加功能。

//查询指定范围内的用户
public PageBean<User> findUsersList(int page,int countPerPage);

5. 编写实现Service层的接口的实现类

@Override
	public PageBean<User> findUsersList(int page, int countPerPage) {
		//创建分页对象
		PageBean<User> pageBean = new PageBean<>();
		
		//1.当前页码
		pageBean.setCurrentPage(page);
		
		//2.每页显示数量
		pageBean.setCountPerPage(countPerPage);
				
		//3.获得用户总数
		int totalCount = 0;
		
		try {
			totalCount = dao.getCount();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		pageBean.setTotalCount(totalCount);
		
		//4.计算总页数 = 商品总数/每页数量，这个简单的数学问题不用多说了吧
		int totalPage = (totalCount-1) / countPerPage +1;
		pageBean.setTotalPage(totalPage);
		
		//5.查询用户
		int startIndex = (page-1)*countPerPage;
		List<User> list = null;
		
		try {
			//这里获取的是用户的列表的对象，在jsp页面中我们需要把它遍历出来
			list = dao.findUserListByPage(startIndex, countPerPage);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		pageBean.setList(list);
		return pageBean;
	}

6.编写Servlet类

涉及到Servlet的跳转，可以去查看我对Servlet简单的跳转和调用的小总结，里面涉及到a标签如何调用和请求servlet，这非常重要，如果你之前没有了解或者刚刚入门Web的相关开发。

//获得页面中的页数的信息
String page = req.getParameter("page");

//这里需要特别注意的是，当你处于分页的第一页或者最后一页的时候，你需要考虑分页两端的箭头是否可以进行操作，当然是不能，所以在这里我们会有一个判断。
if (page == null) {
page = "1";
}
//分页的功能
IUserService service2 = new UserServiceImpl();
PageBean<User> bean = service2.findUsersList(Integer.parseInt(page), 4);

//获得用户的信息
List<User>list = bean.getList();

//将用户信息和分页的信息放入响应对象中
req.setAttribute("list", list);
req.setAttribute("pageBean", bean);
		
// 请求转发，这里我需要跳转的页面是放在WEB-INF下的，为了安全性的考虑，毕竟这个文件夹下的jsp文件经常会遇到访问不了的情况和用户跳转和调用servlet出现500或者404之类的问题，在检查代码没有问题的时候一定要检查是否是映射地址不对要么就是这个文件夹下的jsp文件不能直接访问

req.getRequestDispatcher("/WEB-INF/ManagerMain.jsp").forward(req, resp);
//ManagerMain.jsp是你需要转发的页面

7.jsp页面的实现分类

在最基本的java代码实现之后，你需要考虑的是页面如何编写，包括布局和循环，这里也使用了EL表达式，方便快捷。

第一步，我们先写用于用户信息的显示，光有分页没有用户信息肯定是不行的

<table class="table table-striped">
<caption><b>The User</b></caption>
    <thead>
    <tr>	
        <th>ID</th>
        <th>Account</th>
        <th>Password</th>
        <th>Name</th>
        <th>Email</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach var="list" items="${list}">
        <tr>
            <td>${list.id}</td>
            <td>${list.account}</td>
            <td>${list.password}</td>
            <td>${list.name}</td>
            <td>${list.email}</td>
        </tr>	
    </c:forEach>	
    </tbody>
</table>

最后的一步，写分页，代码比较杂主要在于选择，你只需要观察其中关键的代码即可：

<!--分页-->
<ul class="pagination" style="height: 20px; margin-left: 35%;">
<c:choose>
	<c:when test="${pageBean.currentPage == 1}">
		<li class="disabled"><a href="managermainservlet?&page=1"
			aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
		/li>
	</c:when>
	<c:otherwise>
	<li><a href="managermainservlet?&page=1"
	aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>								</li>
	</c:otherwise>
</c:choose>

<c:forEach begin="1" end="${pageBean.totalPage}" step="1" varStatus="status">
	<c:choose>
		<c:when test="${pageBean.currentPage == status.index}">
			<li class="active"><a href="managermainservlet?page=${status.index}">${status.index}			</a></li>
		</c:when>
		<c:otherwise>
			<li><a href="managermainservlet?&page=${status.index}">${status.index}</a></li>
		</c:otherwise>
		</c:choose>
</c:forEach>

<c:choose>
	<c:when test="${pageBean.currentPage == pageBean.totalPage}">
		<li class="disabled"><a href="managermainservlet?page=${pageBean.totalPage}"
			aria-label="Next"> <span aria-hidden="true">&raquo;</span></a>
		</li>
	</c:when>
	<c:otherwise>
		<li><ahref="managermainservlet?&page=${pageBean.totalPage}"aria-label="Next"> <span aria-				hidden="true">&raquo;</span></a>
		</li>
	</c:otherwise>
</c:choose>
</ul>
<!-- 分页结束-->

本案例的代码实现和逻辑非常清晰明了，实现的过程也用到了Bootstrap的样式，这里需要注意一下。如果你看后有所收获，记得点个赞哈~ 写这挺花时间不过有助于对知识和概念的巩固。

相关推荐