1.修改Mybatis配置檔案

<!-- MyBatis配置 -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
    <property name="dataSource" ref="dataSource" />
    <property name="mapperLocations" value="classpath*:com/jck/**/mapper/*.xml" />
    <property name="plugins">
        <array>
            <bean class="com.github.pagehelper.PageInterceptor">

                <property name="properties">
                    <value>
                        helperDialect=mysql
                        reasonable=true
                        supportMethodsArguments=true
                        params=count=countSql
                        autoRuntimeDialect=true
                    </value>
                </property>
            </bean>
        </array>
    </property>
</bean>
 

2.controller層

/**
 * 主頁
 * @param page 起始頁
 * @param pageSize 每頁最大條數
 * @param wl 查詢條件1
 * @return gys 查詢條件2
 */
@RequestMapping("main")
public ModelAndView mainForm(HttpSession session,ModelAndView mv,
        @RequestParam(required=true,defaultValue="1") Integer page,
        @RequestParam(required=false,defaultValue="30") Integer pageSize,
        String wl, String gys) {

     //會給下面第一條查詢進行分頁 
    PageHelper.startPage(page, pageSize);
    List<Depot> list = mainServer.getDepotList(session, wl, gys);

    mv.addObject("depotList", list);
    PageInfo<Depot> p = new PageInfo<Depot>(list);
    mv.addObject("page", p);
    if(null == wl || wl.equals("")) {
        wl = "0";
    }
    if(null == gys || gys.equals("")) {
        gys = "0";
    }
    mv.addObject("wl", wl);
    mv.addObject("gys", gys);
    mv.setViewName("depot");
    return mv; 
}
 

3.server層

public List<Depotlog> getDepotList(HttpSession session, String wl, String gys) {
    if(null == wl|| wl.equals("0")) {
        wl= "";
    }
    if(null == gys|| gys.equals("0")) {
        gys= "";
    }
    User user = (User)session.getAttribute("user");// user.type 1管理員 2倉庫管理員 3供應商
    if(user.getType() == 1) {
        return depotlogDao.selectDepotListBy(wl, gys);
    }else if(user.getType() == 2) {
        return depotlogDao.selectDepotListByKC(user.getKcdd(), wl, gys);
    }else {
        return depotlogDao.selectDepotListByGYS(user.getGys(), gys);
    }
}
 

4.mapper

<!-- 查詢所有庫存記錄 -->
<select id="selectDepotListBy" resultType="com.jck.entity.Depot" >
    SELECT 
      *
    FROM
      depot d
     LEFT JOIN goods g
     ON d.wlid=g.id
     LEFT JOIN supplier s
     ON d.gysid=s.id
     where
       1=1
     <if test="wl != '' and wl != null">
        AND g.wl = #{wl}
     </if>
     <if test="gys != '' and gys != null">
        AND s.gys = #{gys}
     </if>
     order by d.id desc
</select>

5.JSP

5.1引入bootstrap table

<script src="/static/js/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/bootstrap-paginator.min.js"></script>
<script src="/static/js/bootstrap-table.min.js"></script>
<script src="/static/js/bootstrap-table-zh-CN.min.js"></script>
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/bootstrap-table.css" rel="stylesheet">

5.2條件查詢部分

<form action="depot" method="get"class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">物料</label> 
                    <input type="text" pattern="^[0-9]*$"
                        class="form-control"
                        <c:if test="${wl == 0 || empty wl }">
                            placeholder="請輸入物料編碼" 
                        </c:if>
                        <c:if test="${wl != 0 && !empty wl }">
                            value="${wl }" 
                        </c:if>
                        name="wl " id="wl ">
                </div>
                <c:if test="${user.type != 3}">
                    <div class="form-group">
                        <label for="exampleInputEmail2">供應商</label> 
                        <input type="text" pattern="^[0-9]*$"
                            class="form-control"
                        <c:if test="${gys == 0 || empty gys }">
                            placeholder="請輸入供應商編碼" 
                        </c:if>
                        <c:if test="${gys != 0 && !empty gys }">
                            value="${gys }" 
                        </c:if>
                            name="gys " id="gys ">
                    </div>
                </c:if>
                <button type="submit" class="btn btn-default">搜尋</button>
                <button type="reset" class="btn btn-default" id="reset">清空</button>
            </form>

5.3bootstrap分頁部分

    <!-- 固定表頭-->
    <table class="table table-striped table-bordered table-hover" data-height="700"  data-toggle="table" data-page-size="30">
    <thead>
        <tr id="table_head">
            <th>物料憑證</th>
            <th>物料憑<br>證專案</th>
            <th>物料</th>
            <th>物料描述</th>
            <th>庫存地點</th>
            <th>移動型別</th>
            <th>輸入日期</th>
            <th>輸入時間</th>
            <th>批次</th>
            <th>採購訂單</th>
            <th>專案</th>
            <th>數量</th>
            <th>基本計<br>量單位</th>
            <th>本位幣金額</th>
            <th>供應商</th>
            <th>供應商描述</th>
        </tr>
        </thead>
        <tbody>
            <c:forEach var="item" items="${depotList}" varStatus="status">
                <tr>
                    <td>${item.wlpz}</td>
                    <td>${item.wlpzxm}</td>
                    <td>${item.wl}</td>
                    <td>${item.wlms}</td>
                    <td>${item.kcdd}</td>
                    <td>${item.ydlx}</td>
                    <td>${item.srrq}</td>
                    <td>${item.srsj}</td>
                    <td>${item.pc}</td>
                    <td>${item.cgdd}</td>
                    <td>${item.xm}</td>
                    <td>${item.sl}</td>
                    <td>${item.jbjl}</td>
                    <td>${item.bwbje}</td>
                    <td>${item.gys}</td>
                    <td>${item.gysms}</td>
                </tr> 
            </c:forEach> 
        </tbody>
    </table>
    <div id="page" style="float: right;"></div>

5.4bootstrap js部分

    $(function() {
    var options = {
        bootstrapMajorVersion : 1, //版本
        currentPage : ${page.pageNum}, //當前頁數
        numberOfPages : 5, //最多顯示Page頁
        totalPages : ${page.pages}, //所有資料可以顯示的頁數
        itemTexts: function (type, page, current) {
              switch (type) {
                case "first":
                  return "<span class='glyphicon glyphicon-fast-backward' aria-hidden='true'></span>";
                case "prev":
                  return "<span class='glyphicon glyphicon-backward' aria-hidden='true'></span>";
                case "next":
                  return "<span class='glyphicon glyphicon-forward' aria-hidden='true'></span>";
                case "last":
                  return "<span class='glyphicon glyphicon-fast-forward' aria-hidden='true'></span>";
                case "page":
                  return page;
              }
           },
        onPageClicked : function(e, originalEvent, type, page) {
            location.href = "/depot?page=" + page + "&wl=" + ${wl} + "&gys=" + ${gys};
        }
    }
    $("#page").bootstrapPaginator(options);
})
$("#reset").click(function(){
    $("#wl").attr("value",null);
    $("#gys").attr("value",null);
}); 

6.效果