1. 程式人生 > >超好用的Bootstrap分頁外掛

超好用的Bootstrap分頁外掛

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()   ;  
              //這裡可以選擇是否接收,因為你不一定使用搜索框,看不懂就不需要改寫一樣可以分頁    
var keyWord=$("#keyWordInput").val() ; $("#currentPage").val(currentPage); $("#keyWord").val(keyWord); //同上 $("#spForm").submit() ; }); $("#cpMenu a").click(function(){ var currentPage=$(this).text() ; var
keyWord=$("#keyWordInput").val() ; $("#currentPage").val(currentPage); $("#keyWord").val(keyWord); $("#spForm").submit() ; }); $("#lsMenu a").click(function(){ var lineSize=$(this).text() ; var keyWord=$("#keyWordInput"
).val() ; $("#lineSize").val(lineSize); $("#keyWord").val(keyWord); $("#spForm").submit() ; }); $("#searchBtn").click(function(){ var keyWord=$("#keyWordInput").val() ; $("#keyWord").val(keyWord); $("#spForm").submit() ; return false ; }); });

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>
                                       &nbsp;&nbsp;&nbsp;跳轉到第&nbsp;<div class="btn-group">
                                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="cpBtn">
                                             ${pageInfo.pageNum}&nbsp;&nbsp;<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>&nbsp;頁&nbsp;&nbsp;&nbsp;                 
                                       &nbsp;&nbsp;&nbsp;每頁顯示&nbsp;<div class="btn-group">
                                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="lsBtn">
                                             ${pageInfo.pageSize}&nbsp;&nbsp;<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>&nbsp;條&nbsp;&nbsp;&nbsp;                 
                                       <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>
                                          &nbsp;共 &nbsp;${pageInfo.size}/${pageInfo.total} &nbsp;條
                                   </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>