数据列表的分页显示---前端及后台

首先，整个页面包括：列表数据、数据总数、当前页数、每页显示数据个数、列表总页数、当前索引数

新建Page类，包含以上6个属性。其中总页数和当前索引值可以通过计算得出，所以可以注释掉

private List<T> data;   //后台数据库查询出来
private int totalRecord; //表示总共有多少记录，从数据库中查询出来
	
//	private int totalPage;  // 表示总共有多少页，计算得到！
//	private int index;   //表示当前索引值，计算出来的！
	
private int pageNumber; //表示的是当前页码，这个参数是从页面传递过来的！
private int pageSize;  //表示的是每页显示多少条数据 ，在servlet中设置的！

计算总页数：

public int getTotalPage() {
/**
* totalPage:表示总共有几页！
* 
*	　　　　总页数          totalRecord[总记录数]    pageSize
*                5       　　　　   10                     2
*                5         　　　　  9                     2
*                4         　　　　  8                     2
*/
　　　if(totalRecord % pageSize ==0){
　　　　　return totalRecord / pageSize;
　　　}		
　   return (totalRecord / pageSize + 1);
}

计算当前索引值：

public int getIndex() {
	/**
	* index表示的是当前索引值，是计算得到的！
	*             当前索引值       每页显示几条数据       当前页是第几页
	*                0                 3                 1
	*                3                 3                 2
	*        
		index  = (pageNumber -1)*pageSize;
	*/
	return (getPageNumber() -1)*pageSize;
}

在后台代码中设置当前页面pageNo、每页多少数据pageSize

protected static int pageNo=1;
protected static int pageSize = 1;

在servlet中调用service层方法

Page<Student> page = stuService.getStudentList(pageNo, pageSize);

通过getStudentList函数得到page类中的所有变量，

public Page<Student> getStudentList(int pageNo, int pageSize){
	//第一步：查询当前表的所有记录数
	int totalRecord=  stuDao.getTotalRecord();
	//第二步：创建page对象,计算索引值、总页数
	Page<Student> page = new Page<Student>(totalRecord,pageNo,pageSize);
	//第三步：查询分页列表数据并设置到page对象中！
	List<Student> list = stuDao.getLimitStuList(page.getIndex(),page.getPageSize());
		
	page.setData(list);
	return page;
}

其中查询表的所有记录数、查询分页数据方法写在dao层；计算索引值和总页数在page类中进行

public int getTotalRecord() {	
	Connection conn = JDBCUtil.getConnection();
	String sql="select count(*) as total from student ";
	PreparedStatement ps=null;
	int total=0;
	try {
		ps=conn.prepareStatement(sql);
		ResultSet rs = ps.executeQuery();
		if(rs.next()){
			total = rs.getInt("total");
		}
	} catch (SQLException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}finally {
		JDBCUtil.close(conn);
	}	
	return total;
}


	
public List<Student> getLimitStuList(int index, int pageSize) {
	List<Student> list = new ArrayList<Student>();
	Connection conn = JDBCUtil.getConnection();
	String sql="select * from student limit ?,?";	
	PreparedStatement ps=null;		
	try {
		ps=conn.prepareStatement(sql);
			
		ps.setInt(1, index);
		ps.setInt(2, pageSize);
			
		ResultSet rs = ps.executeQuery();
		while(rs.next()){
			Student stu = new Student();
				
			stu.setId(rs.getInt(1));
			stu.setName(rs.getString("name"));
			stu.setPassword(rs.getString("password"));
			stu.setAge(rs.getInt("age"));
			stu.setSex(rs.getString("sex"));
			stu.setEmail(rs.getString("email"));
			stu.setSchool(rs.getString("school"));
			stu.setScore(rs.getDouble("score"));
				
			list.add(stu);
		}
	} catch (SQLException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}finally {
		JDBCUtil.close(conn);
	}	
	return list;
}

最后在页面通过EL表达式，调用page中的数据即可。

<c:forEach items="${page.data }" var="stu">
	<tr>
	    <td>${stu.id }</td>
	    <td>${stu.name }</td>
	    <td>${stu.age }</td>
		<td>${stu.sex }</td>
		<td>${stu.email }</td>
		<td>${stu.school }</td>
		<td>${stu.score }</td>
		<td><a href="#">Change</a></td>
		<td><a href="#">Delete</a></td>
	</tr>
</c:forEach>

前端分页主要通过EL表达式得到每个页面的数据，再显示出来

在page类中新加入path属性，用以存储每次转发的路径及携带参数

private String path;

新建WEBUtils类，获取路径，放在新声明的url中，简便页面中的EL表达式

public static String getPath(HttpServletRequest request){
	String requestURI = request.getRequestURI();//获取请求路径
	String queryString = request.getQueryString();//获取请求参数
	String url = requestURI+"?"+queryString;
	if(url.contains("&pageNo")){
		url = url.substring(0, url.indexOf("&pageNo"));
	}
	return url;
}

在servlet中将WEBUtils中获取的url放入page中

page.setPath(url)

在要显示的页面写如下代码，主要是分类进行判断

<div id="page_nav">
	<a href="${page.path}&pageNo=1">首页</a>
	<a href="${page.path}&pageNo=${page.pageNumber -1 }">上一页</a>
		<c:choose>
			<c:when test="${page.totalPage <= 3 }" >
				<c:set var="begin" value="1"></c:set>
				<c:set var="end" value="${page.totalPage}"></c:set>
			</c:when>
			<c:when test="${page.pageNumber <= 2 }">
				<c:set var="begin" value="1"></c:set>
				<c:set var="end" value="3"></c:set>
			</c:when>
			<c:otherwise>
				<c:set var="begin" value="${page.pageNumber-1}"></c:set>
				<c:set var="end" value="${page.pageNumber+1}"></c:set>
				<c:if test="${end > page.totalPage }">
					<c:set var="begin" value="${page.totalPage-2}"></c:set>
					<c:set var="end" value="${page.totalPage}"></c:set>
				</c:if>
			</c:otherwise>
		</c:choose>
		<c:forEach begin="${begin }" end="${end}" var="num">
			<c:if test="${page.pageNumber == num }">
				【${num}】
			</c:if>
			<c:if test="${page.pageNumber != num }">
				<a href="${page.path}&pageNo=${num}">${num }</a>
			</c:if>
		</c:forEach>
	<a href="${page.path}&pageNo=${page.pageNumber +1}">下一页</a>
	<a href="${page.path}&pageNo=${page.totalPage}">末页</a>
	共${page.totalPage }页，${page.totalRecord }条记录,去第<input value="${page.totalPage }" name = "pn" id ="pn_input"/>页
	<input type="button" value="确定" id="btn_id"/>
	<script type="text/javascript">
		$("#btn_id").click(function(){
			var value= $("#pn_input").val();
			window.location="${page.path}&pageNo="+value;
		});
	</script>
</div>

注意：要导jQuery包！！

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>

效果如下：