您的位置:首页 > Web前端 > JavaScript

如何在JSP页面中不使用任何插件实现分页查询

2017-09-23 22:43 495 查看

JSP中不使用插件实现分页查询

使用分页查询的原因

当我们需要展示全部数据的时候,由于数据量比较庞大,如果在一个页面全部展示的话太过于庞大,且从数据库一次性查询所有数据造成了数据访问压力的倍增,因此我们需要采用物理分页查询的方式去查询数据.

分页效果图如下,基本效果类似百度的分页条效果,效果图如下所示

第 1 页效果:没有上一页



第 2 ~ 5 页效果:左边不足5页



中间页效果:左5右4



倒数第 2 ~ 4 页效果:右边不足4页



倒数第 1 页效果:没有下一页



第一步 : 准备实体类Page

准备一个实体类Page,封装分页查询需要的相关参数,参数信息及作用见下面代码所示:

/**
* 分页对象,里面包括分页信息和数据结果
*/
public static class Page<E> implements Serializable {
/**
*
*/
private static final long serialVersionUID = 1L;

// 分页的基本信息
private int pageNum; // 当前页
private int pageSize; // 每页显示条数
private int startRow; // 开始页
private int endRow; // 结束页
private long total; // 总共记录数
private int pages; // 总共页数

// 分页的查询数据
private List<E> result;

public Page(Integer pageNum, Integer pageSize) {

// 第一次查询默认查询第 1 页
if (pageNum == null || pageNum < 1) {
pageNum = 1;
}

// 第一次查询默认每页显示 5 条记录数
if (pageSize == null || pageSize < 1) {
pageSize = 5;
}
this.pageNum = pageNum;
this.pageSize = pageSize;
}

public List<E> getResult() {
return result;
}

public void setResult(List<E> result) {
this.result = result;
}

public int getPages() {
// 计算总页数
long totalPage = this.getTotal() / this.getPageSize()
+ ((this.getTotal() % this.getPageSize() == 0) ? 0 : 1);

4000
this.setPages((int) totalPage);
return pages;
}

public void setPages(int pages) {
this.pages = pages;
}

public int getEndRow() {
this.endRow = pageNum * pageSize;
return endRow;
}

public void setEndRow(int endRow) {
this.endRow = endRow;
}

public int getPageNum() {
return pageNum;
}

public void setPageNum(int pageNum) {
this.pageNum = pageNum;
}

public int getPageSize() {
return pageSize;
}

public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}

public int getStartRow() {
this.startRow = this.pageNum > 0
? (this.pageNum - 1) * this.pageSize : 0;
return startRow;
}

public void setStartRow(int startRow) {
this.startRow = startRow;
}

public long getTotal() {
return total;
}

public void setTotal(long total) {
this.total = total;
}

@Override
public String toString() {
return "Page{" + "pageNum=" + pageNum + ", pageSize=" + pageSize
+ ", startRow=" + startRow + ", endRow=" + endRow
+ ", total=" + total + ", pages=" + pages + '}';
}
}


第二步 : 编写超链接分页查询所有product信息

<a href="${pageContext.request.contextPath }/productList" >商品列表</a>


第三步 : 编写查询商品的web层

public class PageQueryServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// 1 获取查询的页码(当前页码)
int pageNum = Integer.parseInt(request.getParameter("pageNum"));

// 2 获取每页显示记录数
int pageSize = Integer.parseInt(request.getParameter("pageSize"));

// 3 将当前页码传给 业务层, 进行分页查询, 返回 pageProducts
ProductService productService = new ProductService();
Page<Product> pageProducts = productService.pageQuery(pageNum,pageSize);

// 4 将 pageProducts 转发给 分页页面 且 显示
request.setAttribute("pageProducts", pageProducts);
request.getRequestDispatcher("/productList.jsp").forward(request, response);
return;
}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}

}


第四步 : 编写查询商品的service层

/**
* 商品服务类
*/
public class ProductService {

/**
* 分页查询
*/
public Page pageQuery(int pageNum, int pageSize) {

// 新建一个Page对象接收pageNum和pageSize
Page<Product> pageProducts = new Page();
pageProducts.setPageNum(paegNum);
pageProducts.setPageSize(paegSize);

// 调用Dao层查询数据
List<Product> productList = productDao.queryPageData(pageProducts.getStartRow(), pageSize);
pageProducts.setResult(productList);

return pageProducts;
}


第五步 : 编写查询商品的dao层

public class CustomerDao {

public List<Product> queryPageData(int startRow, int pageSize) {

// 获取执行查询的对象
QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDatasource());

// 编写sql语句
String sql = "select * from customer limit ?, ?";

try {
List<Product> productList = queryRunner.query(sql, new BeanListHandler<Product>(Product.class), startRow, pageSize);
return productList;
} catch (SQLException e) {
e.printStackTrace();
throw new RuntimeException("分页查询产品数据 出现异常!");
}
}
}


第六步 : 核心 : 编写productList.jsp分页查询的页面代码

<table cellspacing="1" cellpadding="0" width="100%" border="0" >

<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
</tr>

<c:forEach items="${pageProducts.result }" var="product">
<tr>
<td>${product.id}</td>
<td>${product.name}</td>
<td>${product.price}</td>
</td>
</tr>
</c:forEach>

</table>

<div>
<span>

<a href="list.do?pageNum=1&pageSize=${pageProducts.pageSize}">首页</a>

<!-- 4 如果不是第一页,显示 上一页 -->
<c:if test="${pageProducts.pageNum!=1 }">
<a href="list.do?pageNum=${pageProducts.pageNum-1}&pageSize=${pageProducts.pageSize}">上一页</a>
</c:if>

<!-- 1 如果总页数<10, 开始页:1, 结束页:总页数 -->
<c:if test="${pageProducts.pages<10 }">
<c:set var="startRow" value="1"></c:set>
<c:set var="endRow" value="${pageProducts.pages}"></c:set>
</c:if>

<!-- 2 如果总页数>=10, -->
<c:if test="${pageProducts.pages>=10 }">
<!-- 2.1 (当前页-5)<1,表示 当前页前面不足5页, 开始页:1,结束页:10 -->
<c:if test="${(pageProducts.pageNum-5)<1 }">
<c:set var="startRow" value="1"></c:set>
<c:set var="endRow" value="10"></c:set>
</c:if>
<!-- 2.2 (当前页-5)>=1 且 (当前页+4)<=总页数,表示 当前页前面超过了5页 且 后面 超过了4页, 开始页:(当前页-5),结束页:(当前页+4) -->
<c:if test="${(pageProducts.pageNum-5)>=1 && (pageProducts.pageNum+4)<=pageProducts.pages }">
<c:set var="startRow" value="${pageProducts.pageNum-5 }"></c:set>
<c:set var="endRow" value="${pageProducts.pageNum+4 }"></c:set>
</c:if>
<!-- 2.3 (当前页+4)>总页数,表示 当前页后面 不足4页, 开始页:(总页数-9),结束页:总页数 -->
<c:if test="${(pageProducts.pageNum+4)>pageProducts.pages }">
<c:set var="startRow" value="${pageProducts.pages-9 }"></c:set>
<c:set var="endRow" value="${pageProducts.pages }"></c:set>
</c:if>
</c:if>

<!-- 3 显示页码 -->
<c:forEach begin="${startRow }" end="${endRow }" step="1" var="i">
<!-- 如果是当前页 直接用红色显示 -->
<c:if test="${i==pageProducts.pageNum }">
<font color="red" size="5">${i }</font>
</c:if>
<!-- 如果不是当前页 使用超链接,可以跳转到指定页 -->
<c:if test="${i!=pageProducts.pageNum }">
<a href="list.do?pageNum=${i}&pageSize=${pageProducts.pageSize}">${i }</a>
</c:if>
</c:forEach>

<!-- 5 如果不是最后一页,显示 下一页 -->
<c:if test="${pageProducts.pageNum!=pageProducts.pages }">
<a href="list.do?pageNum=${pageProducts.pageNum+1}&pageSize=${pageProducts.pageSize}">下一页</a>
</c:if>

<a href="list.do?pageNum=${pageProducts.pages}&pageSize=${pageProducts.pageSize} ">尾页</a>

共<var>${pageProducts.pages}</var>页 到第<input type="text" size="3" id="PAGENO"/>页 <input type="button" onclick="javascript:window.location.href = 'list.do?pageNum=' + $('#PAGENO').val() + '&pageSize=${pageProducts.pageSize}'" value="确定" />

</span>
</div>


以上就是实现基本分页查询的通用代码,如果需要条件查询,在这个代码的基础上稍微修改一下即可,喜欢就收藏一下
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐