电子相册系统（九）分页

1. 功能说明

电子相册系统要求，在用户登录系统后，需要列表显示出用户的所有保存过的图片。但是问题来了，要是用户保存的图片有几十张以上，那么是不是要在一页中显示几张呢？这样的话，那么整个页面就不好看了。所以我们要求以分页的形式显示。就是在页面的左边显示分页，每页显示三张，没有显示出来的，可以通过”上一页”或”下一页”来查看。如下图所示。

2. 构思实现

首先，我们要查出用户的所有的相片。其次，查询出该用户的所有相片之后，我们就要对这些相片进行分页。最后，我们还要判断用户端的点击“上一页”“下一页”后，是否存在，也就是否还有上一页和是否还有下一页，没有的话就要给出提示。

3. 具体实现

1)        定义个函数findByPage(),用来查找对应用户的所有相片，这里我们需要对查找出来的数量进行分页。需要说明的是，分页的方法，我们直接用Hibernate的Query的函数来实现。同时，需要传入当前页pageNo和每页需要显示的数量pageSize.

@SuppressWarnings("unchecked")
	protected List<T> findByPage(String hql, int pageNo, int pageSize, Object...params)
	{
		Query query = getSessionFactory().getCurrentSession().createQuery(hql);
		for (int i = 0, len = params.length; i < len; i++)
		{
			query.setParameter(i + "",  params[i]);
		}
		return query.setFirstResult((pageNo - 1) * pageSize)
				.setMaxResults(pageSize)
				.list();
	}

2)        我们再定义个函数，用户获取我们需要的资源，如我们查询到了用户的所有的相片，但我们只要相片的名称、标题、UUID的名字，这些我们单独放到          PhotoHolder中，接下的所有资源都从这里获取就行了。

@Override
	public List<PhotoHolder> getPhotoByUser(String user, int pageNo)
	{
		try
		{
			List<Photo> pl = photoDao.findByUser(userDao.findByName(user), pageNo);
			List<PhotoHolder> result = new ArrayList<PhotoHolder>();
			for (Photo p : pl)
			{
				result.add(new PhotoHolder(p.getTitle(), p.getFileName(), p.getUuidName()));
			}
			return result;
		}
		catch (Exception e)
		{
			e.printStackTrace();
			throw new AlbumException("查询相片列表过程中出现异常！");
		}
	}

3)        这些资源都获取到了，分页的功能也有了，那么接下来的就是判断是否到达是最上一页，或是否到了最下一页。

@WebServlet(urlPatterns="/turnPage")
public class TurnPageServlet extends BaseServlet
{
	public void service(HttpServletRequest request
			, HttpServletResponse response)throws IOException,ServletException
		{
			String turn = request.getParameter("turn");
			HttpSession session = request.getSession(true);
			String name = (String)session.getAttribute("curUser");
			Object pageObj = session.getAttribute("curPage");
			// 如果HttpSession中的curPage为null，则设置当前页为第一页
			int curPage = pageObj == null ? 1 :(Integer) pageObj;
			response.setContentType("text/javascript;charset=gbk");
			PrintWriter out = response.getWriter();
			if (curPage == 1 && turn.equals("-1"))
			{
				out.println("alert('现在已经是第一页，无法向前翻页！')");
			}
			else
			{
				// 执行翻页，修改curPage的值。
				curPage += Integer.parseInt(turn);
				try
				{
					List<PhotoHolder> photos = as.getPhotoByUser(name , curPage);
					// 翻页后没有记录
					if (photos.size() == 0)
					{
						out.println("alert('翻页后找不到任何相片记录，"
							+ "系统将自动返回上一页')");
						// 重新返回上一页
						curPage -= Integer.parseInt(turn);
					}
					else
					{
						// 把用户正在浏览的页码放入HttpSession中
						session.setAttribute("curPage" , curPage);
					}
				}
				catch (AlbumException ex)
				{
					out.println("alert('" + ex.getMessage() + "请重试！')");
				}
			}
		}
}

4)        最后就是Html页面的处理和jQuery的方法实现了。

 <div align="center"><a href="javascript:void(0);" onclick="turnPage(-1);">上一页</a>
		 <a href="javascript:void(0);" onclick="turnPage(1);">下一页</a></div>

// 处理翻页的函数
function turnPage(flag)
{
	$.getScript("turnPage?turn=" + flag);
}