1. 程式人生 > >JSP中資料分頁的實現

JSP中資料分頁的實現

分頁查詢的實現

 1) 首先建立一個pageBean,包含pageIndex(頁碼索引)、total(頁碼總數)、pageSize(每頁容量)、tar(分頁條)、dataList(資料物件集) 屬性

// 頁碼索引
private int pageIndex;
// 每頁的容量
private int pageSize;
// 總頁數
private int pageCount;
// 分頁後的資料集合
private List<?> dataList;
// 資料總條數
private int total;
// 準備一個集合顯示分頁條數
private int[] bar;

  2) 利用js,在頁面載入的時候呼叫分頁查詢的servlet,此時pageIndex=1。

<script type="text/javascript">
onload=function(){
// 如果當前頁碼為空,則首先查詢一次
if("${pageBean.pageIndex}" == "" || "${pageBean.pageIndex}" == null){
window.location.href="${root}/product?info=findProdByPage&pageIndex=1";
}
}
</script>

  3) 在servlet中接收到頁面傳遞來的頁碼,呼叫service層分頁查詢的方法,將返回的pageBean物件存放到request域中,轉發商品列表頁面;

/**
 * 分頁查詢商品
 */
private void findProdByPage(HttpServletRequest request, HttpServletResponse response) {
// 接收頁碼
int pageIndex = Integer.parseInt(request.getParameter("pageIndex"));
ProductService productService = new ProductServiceImpl();
PageBean pageBean = productService.findProdByPage(pageIndex);
request.setAttribute("pageBean", pageBean);
try {
request.getRequestDispatcher("/product_list.jsp").forward(request, response);
} catch (Exception e) {
e.printStackTrace();
}
}

    4)在service層定義每頁的資料容量pageSize,呼叫dao層getCount()獲取總的記錄數total, 根據記錄數和每頁資料容量計算出總頁數;再根據當前頁碼和每頁記錄數呼叫dao層findProdByPage(start, pageSize)方法查詢出當前頁碼要顯示的的資料集dataList,最後對每頁資料容量、當前頁碼、總記錄數、當前頁碼資料集、總頁數進行封裝,返回到web層。

/**
 * 分頁查詢商品資訊
 */
public PageBean findProdByPage(int pageIndex) {
// 1、total總記錄數
int total = 0;
List<Product> dataList = null;
try {
total = productDao.getCount();
} catch (SQLException e1) {
e1.printStackTrace();
}
// 2、一頁顯示多少個數據
int pageSize = 18;
// 3、計算總頁數
int pageCount = total % pageSize == 0 ? (total / pageSize) : (total / pageSize) + 1;
// 5、呼叫dao層獲取分頁後的資料
try {
// 當前頁的開始檢索的資料索引(start)為 (當前頁碼-1)*每頁資料容量
dataList = productDao.findProdByPage((pageIndex - 1) * pageSize, pageSize);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

// 封裝資料
PageBean pageBean = new PageBean();

pageBean.setTotal(total);
pageBean.setPageCount(pageCount);
pageBean.setPageIndex(pageIndex);
pageBean.setDataList(dataList);
pageBean.setPageSize(pageSize);

return pageBean;
}

    5)dao層首先獲取總記錄數,返回給service層,再利用limit查詢出當前頁碼資料集返回給service。

/**
* 獲取商品總數
* @throws SQLException 
*/
public int getCount() throws SQLException {
String sql = "select count(*) from product";
int pageCount = Integer.parseInt(String.valueOf(queryRunner.query(sql, new ScalarHandler<Long>())));
return pageCount;

}

/**
* 獲取分頁商品資訊
* @throws SQLException 
*/
public List<Product> findProdByPage(int begin, int pageSize) throws SQLException {
// sql 語句和引數
String sql = "select * from product limit ?, ?";
Object[] params = {begin, pageSize};
// 返回分頁查詢的資料
List<Product> productList = queryRunner.query(sql, new BeanListHandler<Product>(Product.class), params);
return productList;
}

6)JSP頁面的顯示。利用jstl遍歷,獲取到request域中的pageBean的資料集中每條資料的資訊。再根據當前頁碼、碼總頁進行遍歷顯示所有頁。如果不是第一頁,點擊向左翻頁,當前頁碼減1;如果不是最後一頁,點擊向右翻頁,當前頁碼加1。

<!-- 遍歷顯示商品資訊 -->
<c:forEach var="product" items="${pageBean.dataList}">
<div class="col-md-2" style="height: 230px">
<a href="${pageContext.servletContext.contextPath}/product?info=getProdInfo&pid=${product.pid}"> 
<img src="${product.pimage}" width="170" height="170" style="display: inline-block;">
</a>
<p>
<a href="${pageContext.servletContext.contextPath}/product?info=getProdInfo&pid=${product.pid}" style='color: green'>${product.pname}</a>
</p>
<p>
<font color="#FF0000">商城價:&yen;${product.shop_price}</font>
</p>
</div>
</c:forEach>

<!--分頁條顯示-->
<div style="width: 380px; margin: 0 auto; margin-top: 50px;">
<ul class="pagination" style="text-align: center; margin-top: 10px;">
<!-- 上一頁 -->
<!-- 判斷是否是第一頁 -->
<c:if test="${pageBean.pageIndex == 1}">
<li class="disabled">
<a href="javascript:void(0)" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
</li>
</c:if>
<c:if test="${pageBean.pageIndex != 1}">
<li class="disabled">
<a href="${root}/product?info=findProdByPage&pageIndex=${pageBean.pageIndex-1}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
</li>
</c:if>

<c:forEach begin="1" end="${pageBean.pageCount}" var="pageNum">
<!-- 判斷當前頁 -->
<c:if test="${pageBean.pageIndex == pageNum}">
<li class="active"><a href="javascript:void(0)">${pageNum}</a></li>
</c:if>
<c:if test="${pageBean.pageIndex != pageNum}">
<li class="active"><a href="${root}/product?info=findProdByPage&pageIndex=${pageNum}">${pageNum}</a></li>
</c:if>

</c:forEach>

                        <!-- 下一頁 -->
<!-- 判斷當前頁是否是最後一頁 -->
<c:if test="${pageBean.pageIndex == pageBean.pageCount}">
<li>
<a href="javascript:void(0)" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
</li>
</c:if>
<c:if test="${pageBean.pageIndex != pageBean.pageCount}">
<li>
<a href="${root}/product?info=findProdByPage&pageIndex=${pageBean.pageIndex+1}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
</li>
</c:if>
</ul>
</div>
<!-- 分頁結束 -->