分页综合应用(分页下拉、当前页、上一页、下一页)

最新推荐文章于 2025-11-16 15:54:26 发布

原创最新推荐文章于 2025-11-16 15:54:26 发布 · 4.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#JspServlet

JSP&Servlet 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用Bootstrap、JSP、Servlet、EL和JSTL实现分页功能，包括分页下拉选择、当前页、上一页和下一页的逻辑。通过提供数据库SQL文件和代码示例，详细展示了JSP页面和Servlet后台的实现方式，以及如何利用JavaScript响应下拉列表变化并重新请求后台数据。

先看需求：

本次练习的数据库sql文件以及代码地址：

http://pan.baidu.com/s/1jIdV7r4

使用Bootstrap构建显示层

JSP+Servlet+EL+JSTL+Dao+MySql+JDBC

主页的jsp代码

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻列表</title>
<link href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>
</head>
<body>
<h4 class="text-center"><a href="news?action=list">新闻列表</a></h4>
<div class="container" style="margin-top: 60px;">
	<div class="row-fluid">
		<div class="col-md-8">
			<jsp:include page="${mainPage }"></jsp:include>
		</div>
		<div class="col-md-4">
		</div>
	</div>
</div>

</body>
</html>

后台Servlet代码：

package com.zhiqi.web;

import java.io.IOException;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zhiqi.dao.NewsDao;
import com.zhiqi.model.News;
import com.zhiqi.model.PageBean;
import com.zhiqi.util.DbUtil;
import com.zhiqi.util.PropertiesUtil;
import com.zhiqi.util.StringUtil;

public class NewsServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private DbUtil dbUtil=new DbUtil();
	private NewsDao newsDao=new NewsDao();
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		String action=req.getParameter("action");
		if("list".equals(action)){//新闻列表
			try {
				newsList(req,resp);
			} catch (Exception e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}else if("show".equals(action)){//新闻浏览
			try {
				newsList(req,resp);
			} catch (Exception e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}

	private void newsList(HttpServletRequest req, HttpServletResponse resp) throws Exception{
		//分页
		String page=req.getParameter("page");
		if(StringUtil.isEmpty(page)){
			page="1";
		}
		Connection conn=null;
		try {
			conn=dbUtil.getConn();
			int pageCount=0;
			int pageSize=Integer.parseInt(PropertiesUtil.getValue("pageSize"));
			int total=newsDao.newsCount(conn);
			PageBean pageBean=new PageBean(Integer.parseInt(page),Integer.parseInt(PropertiesUtil.getValue("pageSize")));
			ArrayList<News> newsList=newsDao.newsList(conn,pageBean);
			
			//分页总数
			int rowCount=total;
			if(rowCount%pageSize==0){
				pageCount=rowCount/pageSize;
			}else{
				pageCount=rowCount/pageSize+1;
			}
			req.setAttribute("pageCount",pageCount);
			
			//判断
			if(Integer.parseInt(page)<1){
				page="1";
			}
			if(Integer.parseInt(page)>pageCount){
				page=pageCount+"";
			}
			req.setAttribute("page",page);
			
			//分页的下拉
			ArrayList<String> pageNumberList=new ArrayList<String>();;
			for(int i=1;i<=pageCount;i++){
				pageNumberList.add(i+"");
			}
			req.setAttribute("pageNumberList", pageNumberList);
			
			req.setAttribute("newsList", newsList);
			req.setAttribute("mainPage", "news/newsView.jsp");
			req.getRequestDispatcher("main.jsp").forward(req, resp);
		} catch (ClassNotFoundException | SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally{
			try {
				dbUtil.closeConn(conn);
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}
}

封装的PageBean等工具类有助于简化代码

jsp界面代码：

newView.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<div>
	<div>
		<span class="glyphicon glyphicon-th-list"></span><a href="news?action=list">新闻列表</a>
	</div>
	<div>
	  <c:forEach var="news" items="${newsList }">
			<div style="margin-top: 15px;">
				<a href="news?action=show&ids=${news.ids }">${news.title }</a>  -
				『<fmt:formatDate value="${news.time }" type="date" pattern="yyyy-MM-dd HH:mm:ss"/>』
			</div>
		  	<div>
		  		${fn:substring(news.memo,0,100) }	
		  	</div>
		  	<div style="margin-top: 15px;">
		  		<a href="news?action=show&ids=${news.ids }">详情 >></a>
		  		<hr>
		  	</div>
	  </c:forEach>
	</div>
	<nav>
	    <ul class="pager">
	    	<li><a href="news?action=list&page=${1 }">首页</a></li>
	    	<c:if test="${page<=1 }">
	    		<a href="news?action=list&page=${1 }">上一页</a>
	    	</c:if>
	    	<c:if test="${page>1 }">
	    		<li><a href="news?action=list&page=${page-1 }">上一页</a></li>
	    	</c:if>
	    	<c:if test="${page<pageCount }">
	    		<li><a href="news?action=list&page=${page+1 }">下一页</a></li>
	    	</c:if>
	    	<c:if test="${page>=pageCount }">
	    		<a href="news?action=list&page=${pageCount }">下一页</a>
	    	</c:if>
		    <li><a href="news?action=list&page=${pageCount }">尾页</a></li>
		    <li>
		    	<select id="sel" onchange="pageNumberChange()">
		    		<c:forEach var="elem" items="${pageNumberList }">
		    			<option value="${elem }" ${elem==page?'selected':'' }>第${elem }页</option>
		    		</c:forEach>
		    	</select>
		    </li>
		    <li>当前是第 ${page } 页,一共${pageCount }页</li>
		</ul>
	</nav>
</div>

<script type="text/javascript">
	function pageNumberChange(){
		var sel=document.getElementById("sel");
		//alert(sel.value);
		window.location="news?action=list&page="+sel.value;
	}
</script>

main.jsp通过<jsp:include page=""></jsp:include>引入使得代码层次分明

请求new?action=list后

运行如图：

上一页与下一页的判断使用了<c:if></c:if>标签

遍历下拉列表的option选项，selected的某项使用三目运算符在EL表达式内计算（EL表达式支持三目运算）

下拉列表onchange事件触发时

JavaScript来从新请求后台Servlet

<select id="sel" onchange="pageNumberChange()">
	<c:forEach var="elem" items="${pageNumberList }">
		<option value="${elem }" ${elem==page?'selected':'' }>第${elem }页</option>
	</c:forEach>
</select>

<script type="text/javascript">
	function pageNumberChange(){
		var sel=document.getElementById("sel");
		//alert(sel.value);
		window.location="news?action=list&page="+sel.value;
	}
</script>

使用JSTL的fn标签的substring()来进行字符串长度的截取

<div>
	${fn:substring(news.memo,0,100) }	
</div>