超好用的Bootstrap分頁外掛
阿新 • • 發佈：2019-02-20
1.匯入JS
/**
* DevelopTime:2016/10/31
* ZZU·WangChengJian
* MyBatis分頁外掛
* 使用注意:
* 1.引入pagination.js,和分頁JSP程式碼
* 2.控制層把PageInfo傳到前臺頁面
*/
$(function(){
$(":button[id!='cpBtn'][id!='lsBtn'][id!='searchBtn']").click(function(){
var currentPage=$(this).val() ;
//這裡可以選擇是否接收,因為你不一定使用搜索框,看不懂就不需要改寫一樣可以分頁 2.匯入JSP
2.1、預先匯入JQuery、Bootstrap、分頁JS(上面)、支援:
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.1.min.js"></script>
<!-- Bootstrap-->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- 自定義分頁的JS外掛 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/pagination.js"></script>2.2、匯入JSP分頁Code
<!-------------------------------分頁外掛↓(根據業務需要新增)----------------------------------------------------------------->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="keyWordInput" class="col-sm-2 control-label">關鍵字</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="keyWordInput" placeholder="請輸入關鍵詞" value="${keyWord}">
</div>
<span class="col-sm-2">
<button type="button" class="btn btn-success" id="searchBtn">搜尋</button>
</span>
</div>
</form>
<!-------------------------------分頁外掛↑(根據業務需要新增)-------------------------------------------------------------------> <!-------------------------------分頁外掛↓----------------------------------------------------------------->
<form action="${pageContext.request.contextPath}/Course/list" method="POST" name="spForm" id="spForm">
<input type="hidden" id="currentPage" name="currentPage" value="${pageInfo.pageNum}">
<input type="hidden" id="lineSize" name="lineSize" value="${pageInfo.pageSize}">
<input type="hidden" id="keyWord" name="keyWord" value="${keyWord}">
<button type="button" class="btn btn-primary" value="${pageInfo.firstPage}"
${pageInfo.pageNum==1?"disabled='disabled'":""}>
首頁
</button>
<button type="button" class="btn btn-success"
value="${pageInfo.prePage}"
${pageInfo.prePage==0?"disabled='disabled'":""}>
上一頁
</button>
跳轉到第 <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="cpBtn">
${pageInfo.pageNum} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="cpMenu">
<c:forEach begin="1" end="${pageInfo.pages}" var="page">
<li><a href="#">${page}</a></li>
</c:forEach>
</ul>
</div> 頁
每頁顯示 <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="lsBtn">
${pageInfo.pageSize} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="lsMenu">
<c:forEach items="${lineSizes}" var="lineSize">
<li><a href="#">${lineSize}</a></li>
</c:forEach>
</ul>
</div> 條
<button type="button" class="btn btn-info"
value="${pageInfo.nextPage}"
${pageInfo.nextPage==0?"disabled='disabled'":""}>
下一頁
</button>
<button type="button" class="btn btn-danger"value="${pageInfo.lastPage}"
${pageInfo.pageNum==pageInfo.lastPage?"disabled='disabled'":""}>
尾頁
</button>
共 ${pageInfo.size}/${pageInfo.total} 條
</form>
<!-------------------------------分頁外掛↑------------------------------------------------------------------->3.控制層的相關程式碼展示,我相信夠你分析外掛原理的
package cn.zzu.wcj.handler;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
import cn.zzu.wcj.entity.Course;
import cn.zzu.wcj.service.ICourseService;
import com.github.pagehelper.PageInfo;
@RequestMapping("/Course")
@Controller
public class CourseHandler {
@Autowired
private ICourseService courseService ; //注入Service
@SuppressWarnings(value={"unchecked"})
@RequestMapping("/list")
public ModelAndView list(@RequestParam(name="currentPage",required=false,defaultValue="1") Integer currentPage,
@RequestParam(name="lineSize",required=false,defaultValue="8") Integer lineSize ,
@RequestParam(name="keyWord",required=false,defaultValue="") String keyWord){
ModelAndView mv=new ModelAndView("course_list") ;
try{
Map<String,Object> map=this.courseService
.findAll(currentPage, lineSize, keyWord) ; //複雜查詢
PageInfo<Course> pageInfo=(PageInfo<Course>) map.get("pageInfo") ; //取得分頁資訊
List<Course> courses=(List<Course>) map.get("courses"); //取得全部課程
mv.addObject("pageInfo", pageInfo) ; //增加PageInfo模型
mv.addObject("courses", courses) ; //增加Courses模型
mv.addObject("keyWord", keyWord) ; //增加KeyWord關鍵詞
mv.addObject("lineSizes", new int[]{5,10,15,20,25,30}) ;
}catch(Exception e){
mv.setViewName("err") ; //出現異常就跳轉到錯誤頁
}
return mv ;
}Tips：1.我使用的是SpringMVC+Spring+MyBatis開發的. 2.外掛非常簡單，直接無腦複製就可以了,前提是你使用了MyBatis和MyBatis的分頁外掛(我以Maven座標的形式給你,自己去引)`
<!-- 加入分頁外掛 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>${pagehelper.version}</version>
</dependency>