Bootstrap和Java分頁實(shí)例第一篇
關(guān)于此文
bootstrap是前端很流行的框架,正在開發(fā)的項(xiàng)目,用bootstrap搭建起來的頁面,自我感覺很完美,終于告別了蒼白無力的白花花的難看的……的頁面了。哈哈。
現(xiàn)在遇到了bootstrap的分頁與Java后臺(tái)結(jié)合起來的分頁封裝問題,對于我這個(gè)Java菜鳥來說,包裝分頁還沒玩過。故此,在網(wǎng)上找了這個(gè)。覺得很不錯(cuò),所以決定記錄到博客里面。
還沒有實(shí)踐,決定寫完博客去實(shí)踐。在上圖。祝我成功吧!
此人的博客沒找到,代碼中有email地址。
pagination
定義了分頁常用的屬性,方法
package com.app.pagination; import java.util.List; /** * 通用分頁接口 * @author: super.wwz@hotmail.com * @ClassName: Pagination * @Version: v0.1 * @param <T> */ public interface Pagination<T> { /** * 判斷是否是首頁 * @return */ boolean isFirst(); /** * 判斷是否是尾頁 * @return */ boolean isLast(); /** * 判斷是否有上一頁 * @return */ boolean isPrevious(); /** * 判斷是否有下一頁 * @return */ boolean isNext(); /** * 獲取上一頁的頁碼 * @return */ int getPreviousIndex(); /** * 獲取下一頁的頁碼 * @return */ int getNextIndex(); /** * 獲取當(dāng)前頁碼 * @return */ int getPageIndex(); /** * 獲取當(dāng)前頁大小 * @return */ int getPageSize(); /** * 獲取總頁數(shù) * @return */ int getTotalPages(); /** * 獲取數(shù)據(jù)總行數(shù) * @return */ int getTotalElements(); /** * 獲取當(dāng)前頁的數(shù)據(jù) * @return */ List<T> getCurrData(); /** * 獲取數(shù)字分頁鏈接對象 * @return */ BetweenIndex getBetweenIndex(); /** * 獲取每頁顯示的分頁鏈接數(shù) * @return */ int getPageLinkNumber(); /** * 設(shè)置每頁的分頁鏈接數(shù)量 * @param pageLinkNumber */ void setPageLinkNumber(int pageLinkNumber); }
BetweenIndex
該接口負(fù)責(zé)獲取分頁鏈接的開始和結(jié)尾索引
package com.app.pagination; /** * 開始鏈接-結(jié)束鏈接 * @author: super.wwz@hotmail.com * @ClassName: BetweenIndex * @Version: v0.1 */ public interface BetweenIndex { /** * 獲取開始分頁鏈接索引 * @return */ int getBeginIndex(); /** * 獲取結(jié)束分頁鏈接索引 * @return */ int getEndIndex(); }
DefaultPagination
Pagination接口的默認(rèn)實(shí)現(xiàn)類
package com.app.pagination.impl; import java.util.List; import com.app.pagination.BetweenIndex; import com.app.pagination.Pagination; /** * Pagination接口默認(rèn)實(shí)現(xiàn) * @author: super.wwz@hotmail.com * @ClassName: DefaultPagination * @Version: v0.1 * @param <T> */ public class DefaultPagination<T> implements Pagination<T> { private int totalElements; private int pageSize; private int totalPages; private int pageIndex; private QueryHandler<T> queryHandler; private List<T> currData; private int pageLinkNumber; public DefaultPagination(int pageIndex, int pageSize, QueryHandler<T> queryHandler, int pageLinkNumber) { this(pageIndex, pageSize, queryHandler); setPageLinkNumber(pageLinkNumber); } public DefaultPagination(int pageIndex, int pageSize, QueryHandler<T> queryHandler){ //初始化數(shù)據(jù)訪問回調(diào)接口 this.queryHandler = queryHandler; //查詢總行數(shù) setTotalElements(); //修正頁大小 setPageSize(pageSize); //計(jì)算總頁數(shù): setTotalPages(); //修正頁碼 setPageIndex(pageIndex); //查詢當(dāng)前頁數(shù)據(jù) setCurrData(); } private void setCurrData() { // TODO Auto-generated method stub this.currData = queryHandler.getCurrData(pageIndex, pageSize); } private void setPageIndex(int pageIndex) { // TODO Auto-generated method stub if(pageIndex < 1) { this.pageIndex = 1; } else if(pageIndex > totalPages) { this.pageIndex = totalPages; } else { this.pageIndex = pageIndex; } } private void setTotalPages() { // TODO Auto-generated method stub if(pageSize > 0) { /*//普通算法: this.totalPages = totalElements % pageSize == 0 ? totalElements / pageSize : (totalElements / pageSize) + 1;*/ //減一公式: this.totalPages = (totalElements + pageSize - 1) / pageSize; } } private void setPageSize(int pageSize) { // TODO Auto-generated method stub if(pageSize < 1) { this.pageSize = 1; } else if(pageSize > totalElements) { this.pageSize = totalElements; } else { this.pageSize = pageSize; } } private void setTotalElements() { // TODO Auto-generated method stub this.totalElements = queryHandler.getTotalElements(); } @Override public boolean isFirst() { // TODO Auto-generated method stub return pageIndex == 1; } @Override public boolean isLast() { // TODO Auto-generated method stub return pageIndex == totalPages; } @Override public boolean isPrevious() { // TODO Auto-generated method stub return pageIndex > 1; } @Override public boolean isNext() { // TODO Auto-generated method stub return pageIndex < totalPages; } @Override public int getPreviousIndex() { // TODO Auto-generated method stub return isPrevious() ? pageIndex - 1 : 1; } @Override public int getNextIndex() { // TODO Auto-generated method stub return isNext() ? pageIndex + 1 : totalPages; } @Override public int getPageIndex() { // TODO Auto-generated method stub return pageIndex; } @Override public int getPageSize() { // TODO Auto-generated method stub return pageSize; } @Override public int getTotalPages() { // TODO Auto-generated method stub return totalPages; } @Override public int getTotalElements() { // TODO Auto-generated method stub return totalElements; } @Override public List<T> getCurrData() { // TODO Auto-generated method stub return currData; } @Override public BetweenIndex getBetweenIndex() { // TODO Auto-generated method stub return new BetweenIndex() { private int beginIndex; private int endIndex; { boolean isOdd = pageLinkNumber % 2 == 0; int val = pageLinkNumber / 2; beginIndex = pageIndex - (isOdd ? val - 1: val); endIndex = pageIndex + val; if(beginIndex < 1) { beginIndex = 1; endIndex = pageLinkNumber; } if(endIndex > totalPages) { endIndex = totalPages; beginIndex = endIndex - pageLinkNumber + 1; } } @Override public int getEndIndex() { // TODO Auto-generated method stub return endIndex; } @Override public int getBeginIndex() { // TODO Auto-generated method stub return beginIndex; } }; } @Override public int getPageLinkNumber() { // TODO Auto-generated method stub return pageLinkNumber; } @Override public void setPageLinkNumber(int pageLinkNumber) { // TODO Auto-generated method stub if (pageLinkNumber < 0) { this.pageLinkNumber = 0; } else if (pageLinkNumber > totalPages) { this.pageLinkNumber = totalPages; } else { this.pageLinkNumber = pageLinkNumber; } } }
QueryHandler
用于DefaultPagination實(shí)現(xiàn)類的查詢回調(diào)接口
package com.app.pagination.impl; import java.util.List; /** * 分頁查詢回調(diào)接口 * @author: super.wwz@hotmail.com * @ClassName: QueryHandler * @Version: v0.1 * @param <T> */ public interface QueryHandler<T> { /** * 獲取數(shù)據(jù)總行數(shù) * @return */ int getTotalElements(); /** * 獲取當(dāng)前頁的數(shù)據(jù) * @param pageIndex * @param pageSize * @return */ List<T> getCurrData(int pageIndex, int pageSize); }
BookDaoImpl
BookDao的實(shí)現(xiàn)類(BookDao接口已經(jīng)省略)
package com.app.dao.impl; import java.sql.SQLException; import java.util.List; import org.apache.commons.dbutils.handlers.BeanListHandler; import org.apache.commons.dbutils.handlers.ScalarHandler; import com.app.bean.Book; import com.app.dao.BaseDao; import com.app.dao.BookDao; public class BookDaoImpl extends BaseDao implements BookDao { @Override public int count() { // 查詢數(shù)據(jù)總行數(shù) String sql = "select count(1) from t_book"; try { return getQueryRunner().query(sql, new ScalarHandler<Integer>()); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } return 0; } @Override public List<Book> getBooks(int pageIndex, int pageSize) { // 關(guān)于SQLServer的查詢分頁sql StringBuffer sql = new StringBuffer(); sql.append("select * from ("); sql.append(" select row_number() over(order by(id)) new_id,* from t_book"); sql.append(") t where new_id between ? and ?"); try { return getQueryRunner().query(sql.toString(), new BeanListHandler<Book>(Book.class), pageSize * (pageIndex - 1) + 1,pageSize * pageIndex); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } return null; } }
BookServiceImpl
BookService業(yè)務(wù)邏輯接口的實(shí)現(xiàn)類 (BookService已經(jīng)省略)
package com.app.service.impl; import java.util.List; import com.app.bean.Book; import com.app.dao.BookDao; import com.app.dao.impl.BookDaoImpl; import com.app.pagination.Pagination; import com.app.pagination.impl.DefaultPagination; import com.app.pagination.impl.QueryHandler; import com.app.service.BookService; /** * 業(yè)務(wù)邏輯層查詢分頁數(shù)據(jù)示例 * @author: super.wwz@hotmail.com * @ClassName: BookServiceImpl * @Version: v0.1 */ public class BookServiceImpl implements BookService { private BookDao bookDao = new BookDaoImpl(); @Override public Pagination<Book> getBookList(int pageIndex, int pageSize,int pageLinkNumber) { // TODO Auto-generated method stub return new DefaultPagination<Book>(pageIndex, pageSize, new QueryHandler<Book>() { @Override public int getTotalElements() { // TODO Auto-generated method stub return bookDao.count(); } @Override public List<Book> getCurrData(int pageIndex, int pageSize) { // TODO Auto-generated method stub return bookDao.getBooks(pageIndex, pageSize); } },pageLinkNumber); } }
BookAction
有關(guān)圖書的Servlet控制器
package com.app.web.action; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.app.bean.Book; import com.app.pagination.Pagination; import com.app.service.BookService; import com.app.service.impl.BookServiceImpl; public class BookAction extends HttpServlet { private static final long serialVersionUID = 5275929408058702210L; private BookService bookService = new BookServiceImpl(); @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); int pageIndex = 1; int pageSize = 10; try { pageIndex = Integer.parseInt(request.getParameter("pageIndex")); pageSize = Integer.parseInt(request.getParameter("pageSize")); } catch (NumberFormatException e) { e.printStackTrace(); } //6: 顯示的分頁鏈接個(gè)數(shù) Pagination<Book> bookPagination = bookService.getBookList(pageIndex, pageSize,6); request.setAttribute("bookPagination", bookPagination); request.getRequestDispatcher("index.jsp").forward(request, response); } }
Jsp
index.jsp
將Pagiation應(yīng)用到bootstrap上的簡單示例bootstrap版本: 3.3.5
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <c:if test="${requestScope.bookPagination == null }"> <c:redirect url="bookAction?pageIndex=1&pageSize=4"></c:redirect> </c:if> <!DOCTYPE html"> <html> <head> <title>圖書信息列表</title> <!-- Bootstrap v3.3.5 --> <link href="${pageContext.request.contextPath}/bootstrap-3.3.5-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet" charset="utf-8" /> <link id="bootstrapTheme" href="${pageContext.request.contextPath}/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" charset="utf-8" /> <script src="${pageContext.request.contextPath}/bootstrap-3.3.5-dist/js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="${pageContext.request.contextPath}/bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container"> <h2 class="page-header">圖書信息</h2> <table class="table table-striped table-bordered table-hover"> <tr> <th>#</th> <th>圖書名</th> <th>單價(jià)</th> </tr> <c:set var="bookPagination" value="${requestScope.bookPagination}"></c:set> <c:choose> <c:when test="${bookPagination.totalElements gt 0}"> <c:forEach var="book" items="${bookPagination.currData}"> <tr> <td>${book.id }</td> <td>${book.name }</td> <td>${book.price }</td> </tr> </c:forEach> <td colspan="3" align="center"> <div class="btn-group" role="group"> <c:if test="${bookPagination.first}" var="isFirst"> <a class="btn btn-primary btn-sm" disabled="disabled" href="#">首頁</a> <a class="btn btn-success btn-sm" disabled="disabled" href="#">上一頁</a> </c:if> <c:if test="${not isFirst}"> <a class="btn btn-primary btn-sm" href="${pageContext.request.contextPath}/bookAction?pageIndex=1&pageSize=${bookPagination.pageSize}">首頁</a> <a class="btn btn-success btn-sm" href="${pageContext.request.contextPath}/bookAction?pageIndex=${bookPagination.previousIndex }&pageSize=${bookPagination.pageSize}">上一頁</a> </c:if> <c:if test="${bookPagination.last }" var="isLast"> <a class="btn btn-success btn-sm" disabled="disabled" href="#">下一頁</a> <a class="btn btn-primary btn-sm" disabled="disabled" href="#">尾頁</a> </c:if> <c:if test="${not isLast}"> <a class="btn btn-success btn-sm" href="${pageContext.request.contextPath}/bookAction?pageIndex=${bookPagination.nextIndex }&pageSize=${bookPagination.pageSize}">下一頁</a> <a class="btn btn-primary btn-sm" href="${pageContext.request.contextPath}/bookAction?pageIndex=${bookPagination.totalPages }&pageSize=${bookPagination.pageSize}">尾頁</a> </c:if> </div> </td> </c:when> <c:otherwise> <tr><td colspan="3">沒有更多數(shù)據(jù)!</td></tr> </c:otherwise> </c:choose> </table> <center> <nav> <ul class="pagination"> <c:if test="${isFirst }"> <li class="disabled"> <a href="#" aria-label="Previous"> <span aria-hidden="true">»上一頁</span> </a> </li> </c:if> <c:if test="${not isFirst }"> <li> <a href="${pageContext.request.contextPath}/bookAction?pageIndex=${bookPagination.previousIndex }&pageSize=${bookPagination.pageSize}" aria-label="Previous"> <span aria-hidden="true">»上一頁</span> </a> </li> </c:if> <c:if test="${bookPagination.pageLinkNumber gt 0}"> <c:set var="betweenIndex" value="${bookPagination.betweenIndex}"></c:set> <c:forEach var="linkIndex" begin="${betweenIndex.beginIndex}" end="${betweenIndex.endIndex}"> <c:if test="${linkIndex eq bookPagination.pageIndex}" var="isCurr"> <li class="active"><a href="#">${linkIndex}</a></li> </c:if> <c:if test="${not isCurr}"> <li><a href="${pageContext.request.contextPath}/bookAction?pageIndex=${linkIndex}&pageSize=${bookPagination.pageSize}" >${linkIndex}</a></li> </c:if> </c:forEach> </c:if> <c:if test="${isLast }"> <li class="disabled"> <a href="#" aria-label="Next"> <span aria-hidden="true">下一頁 »</span> </a> </li> </c:if> <c:if test="${not isLast }"> <li> <a href="${pageContext.request.contextPath}/bookAction?pageIndex=${bookPagination.nextIndex }&pageSize=${bookPagination.pageSize}" aria-label="Next"> <span aria-hidden="true">下一頁 »</span> </a> </li> </c:if> </ul> </nav> </center> </div> </body> </html>
實(shí)例數(shù)據(jù)
說明:
- 如果需要擴(kuò)展分頁功能, 請擴(kuò)展Pagiation接口以及其余實(shí)現(xiàn)類;
- 此外, 此分頁不依賴任何數(shù)據(jù)庫(重新實(shí)現(xiàn)QueryHandler查詢回調(diào)接口即可), 可適用于任何web項(xiàng)目中;
使用List 集合模擬數(shù)據(jù)庫的使用示例:
package com.app.service.impl; import java.util.ArrayList; import java.util.List; import com.app.bean.Book; import com.app.pagination.Pagination; import com.app.pagination.impl.DefaultPagination; import com.app.service.BookService; /** * 使用List<T>集合模擬數(shù)據(jù)庫 * @author: super.wwz@hotmail.com * @ClassName: BookServiceImpl2 * @Version: v0.1 */ public class BookServiceImpl2 implements BookService { // private BookDao bookDao = new BookDaoImpl(); private static List<Book> list = new ArrayList<Book>(); //初始化List<Book>數(shù)據(jù) static { list.add(new Book(1, "書名1", 18)); list.add(new Book(2, "書名2", 13)); list.add(new Book(3, "書名3", 18)); list.add(new Book(4, "書名4", 38)); list.add(new Book(5, "書名5", 18)); list.add(new Book(6, "書名6", 58)); list.add(new Book(7, "書名7", 12)); list.add(new Book(8, "書名8", 11)); list.add(new Book(9, "書名9", 13)); list.add(new Book(10, "書名10", 22)); list.add(new Book(11, "書名11", 19)); list.add(new Book(12, "書名12", 13)); list.add(new Book(13, "書名13", 19)); list.add(new Book(14, "書名14", 32)); } @Override public Pagination<Book> getBookList(int pageIndex, int pageSize, int pageLinkNumber) { return new DefaultPagination<Book>(pageIndex, pageSize, new QueryHandler<Book>() { @Override public int getTotalElements() { //return bookDao.count(); return list.size(); } @Override public List<Book> getCurrData(int pageIndex, int pageSize) { //return bookDao.list(pageIndex, pageSize); int fromIndex = (pageIndex - 1) * pageSize; int endIndex = fromIndex + pageSize; endIndex = endIndex > list.size() ? list.size() : endIndex; return list.subList(fromIndex, endIndex); } }, pageLinkNumber); } }
下一篇更精彩!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Bootstrap和Java分頁實(shí)例第二篇
- BootStrap與validator 使用筆記(JAVA SpringMVC實(shí)現(xiàn))
- 使用java基于pushlet和bootstrap實(shí)現(xiàn)的簡單聊天室
- 值得分享的最全面Bootstrap快速人門案例
- 值得分享的Bootstrap Table使用教程
- 值得分享的bootstrap table實(shí)例
- 值得分享的輕量級Bootstrap Table表格插件
- 值得分享和收藏的Bootstrap學(xué)習(xí)教程
- 值得分享的Bootstrap Ace模板實(shí)現(xiàn)菜單和Tab頁效果
- 基于Bootstrap的Java開發(fā)問題匯總(Spring MVC)
相關(guān)文章
JS實(shí)現(xiàn)快速比較兩個(gè)字符串中包含有相同數(shù)字的方法
這篇文章主要介紹了JS實(shí)現(xiàn)快速比較兩個(gè)字符串中包含有相同數(shù)字的方法,涉及javascript字符串的遍歷、排序、比較等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09JavaScript九九乘法口訣表的簡單實(shí)現(xiàn)
這篇文章主要介紹了JavaScript乘法口訣表的簡單實(shí)現(xiàn),文中給出了詳細(xì)的示例代碼,這樣對大家的理解和學(xué)習(xí)更有幫助,有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-10-10原生js實(shí)現(xiàn)可拖動(dòng)的登錄框效果
本文主要介紹了原生js實(shí)現(xiàn)可拖動(dòng)的登錄框效果的示例代碼。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01外部web端訪問微信小程序云數(shù)據(jù)庫的三種方法總結(jié)
最近在研究微信小程序的云開發(fā)功能,下面這篇文章主要給大家介紹了關(guān)于外部web端訪問微信小程序云數(shù)據(jù)庫的三種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04JavaScript如何動(dòng)態(tài)監(jiān)聽DOM元素高度詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript如何動(dòng)態(tài)監(jiān)聽DOM元素高度,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-07-07