Bootstrap和Java分頁實例第一篇
更新時間：2016年12月23日 11:42:45 作者：菠蘿小妹
這篇文章主要為大家詳細介紹了Bootstrap和Java分頁實例第一篇，具有一定的參考價值，感興趣的小伙伴們可以參考一下
關于此文
bootstrap是前端很流行的框架，正在開發(fā)的項目，用bootstrap搭建起來的頁面，自我感覺很完美，終于告別了蒼白無力的白花花的難看的……的頁面了。哈哈。
現(xiàn)在遇到了bootstrap的分頁與Java后臺結合起來的分頁封裝問題，對于我這個Java菜鳥來說，包裝分頁還沒玩過。故此，在網(wǎng)上找了這個。覺得很不錯，所以決定記錄到博客里面。
還沒有實踐，決定寫完博客去實踐。在上圖。祝我成功吧！
此人的博客沒找到，代碼中有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();
/**
* 獲取當前頁碼
* @return
*/
int getPageIndex();
/**
* 獲取當前頁大小
* @return
*/
int getPageSize();
/**
* 獲取總頁數(shù)
* @return
*/
int getTotalPages();
/**
* 獲取數(shù)據(jù)總行數(shù)
* @return
*/
int getTotalElements();
/**
* 獲取當前頁的數(shù)據(jù)
* @return
*/
List<T> getCurrData();
/**
* 獲取數(shù)字分頁鏈接對象
* @return
*/
BetweenIndex getBetweenIndex();
/**
* 獲取每頁顯示的分頁鏈接數(shù)
* @return
*/
int getPageLinkNumber();
/**
* 設置每頁的分頁鏈接數(shù)量
* @param pageLinkNumber
*/
void setPageLinkNumber(int pageLinkNumber);
}
BetweenIndex
該接口負責獲取分頁鏈接的開始和結尾索引
package com.app.pagination;
/**
* 開始鏈接-結束鏈接
* @author: super.wwz@hotmail.com
* @ClassName: BetweenIndex
* @Version: v0.1
*/
public interface BetweenIndex {
/**
* 獲取開始分頁鏈接索引
* @return
*/
int getBeginIndex();
/**
* 獲取結束分頁鏈接索引
* @return
*/
int getEndIndex();
}
DefaultPagination
Pagination接口的默認實現(xiàn)類
package com.app.pagination.impl;
import java.util.List;
import com.app.pagination.BetweenIndex;
import com.app.pagination.Pagination;
/**
* Pagination接口默認實現(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);
//計算總頁數(shù):
setTotalPages();
//修正頁碼
setPageIndex(pageIndex);
//查詢當前頁數(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實現(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();
/**
* 獲取當前頁的數(shù)據(jù)
* @param pageIndex
* @param pageSize
* @return
*/
List<T> getCurrData(int pageIndex, int pageSize);
}
BookDaoImpl
BookDao的實現(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) {
// 關于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è)務邏輯接口的實現(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è)務邏輯層查詢分頁數(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
有關圖書的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: 顯示的分頁鏈接個數(shù)
Pagination<Book> bookPagination = bookService.getBookList(pageIndex, pageSize,6);
request.setAttribute("bookPagination", bookPagination);
request.getRequestDispatcher("index.jsp").forward(request, response);
}
}
Jsp
index.jsp
將Pagiation應用到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>單價</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ù)據(jù)
說明:
- 如果需要擴展分頁功能, 請擴展Pagiation接口以及其余實現(xiàn)類;
- 此外, 此分頁不依賴任何數(shù)據(jù)庫(重新實現(xiàn)QueryHandler查詢回調(diào)接口即可), 可適用于任何web項目中;
使用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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Bootstrap和Java分頁實例第二篇
- BootStrap與validator 使用筆記(JAVA SpringMVC實現(xiàn))
- 使用java基于pushlet和bootstrap實現(xiàn)的簡單聊天室
- 值得分享的最全面Bootstrap快速人門案例
- 值得分享的Bootstrap Table使用教程
- 值得分享的bootstrap table實例
- 值得分享的輕量級Bootstrap Table表格插件
- 值得分享和收藏的Bootstrap學習教程
- 值得分享的Bootstrap Ace模板實現(xiàn)菜單和Tab頁效果
- 基于Bootstrap的Java開發(fā)問題匯總（Spring MVC）
相關文章
JS實現(xiàn)快速比較兩個字符串中包含有相同數(shù)字的方法
這篇文章主要介紹了JS實現(xiàn)快速比較兩個字符串中包含有相同數(shù)字的方法,涉及javascript字符串的遍歷、排序、比較等相關操作技巧,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了詳解微信小程序?qū)徍瞬煌ㄟ^的解決方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了JavaScript乘法口訣表的簡單實現(xiàn)，文中給出了詳細的示例代碼，這樣對大家的理解和學習更有幫助，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-10-10
本文主要介紹了原生js實現(xiàn)可拖動的登錄框效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了微信小程序拖拽排序列表的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
簡單說一說對JavaScript原型鏈的理解,希望對大家學習JavaScript原型鏈有所幫助，具體內(nèi)容如下2016-10-10
這篇文章主要介紹了讓alert不出現(xiàn)彈窗的兩種方法,需要的朋友可以參考下2014-05-05
外部web端訪問微信小程序云數(shù)據(jù)庫的三種方法總結
最近在研究微信小程序的云開發(fā)功能,下面這篇文章主要給大家介紹了關于外部web端訪問微信小程序云數(shù)據(jù)庫的三種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
JavaScript如何動態(tài)監(jiān)聽DOM元素高度詳解
這篇文章主要為大家詳細介紹了JavaScript如何動態(tài)監(jiān)聽DOM元素高度，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-07-07
下面小編就為大家?guī)硪黄猨s給table賦值的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10