動態查詢和分頁

1、xml配置

<!-- 獲取動態獲取設備總數 -->
    <select id="getAllCcListCount" resultClass="java.lang.Integer" parameterClass="java.util.Map">
        select count(1) from routerinfo
        where 1=1
        <isNotNull prepend="and" property="sn">
            SN like concat('%', #sn#, '%')
        </isNotNull>
        <isNotNull prepend="and" property="version">
            version like concat('%', #version#, '%')
        </isNotNull>
    </select>
    
    <!-- 後臺動態查詢 獲取設備信息分頁列表 -->
    <select id="getCcInfoList" resultClass="CCinfo" parameterClass="java.util.Map">
        select ri.SN,ri.version,ri.remoteip,ri.wanip,ri.updateTime 
        from routerinfo ri
        where 1=1
        <isNotNull prepend="and" property="sn">
            ri.SN like concat('%', #sn#, '%')
        </isNotNull>
        <isNotNull prepend="and" property="version">
            ri.version like concat('%', #version#, '%')
        </isNotNull>
        limit #rowStart#, #pageSize#
    </select>

View Code

2、Controller

public ModelAndView toRouterList(@RequestParam(required = false) String sn,
            @RequestParam(required = false) String version,
            @RequestParam(required = false) String currentPage) {
        
        ModelAndView mav = new ModelAndView("router/routerList");
        
        //System.out.println("sn: "+sn+" version: "+version+" currentPage:"+currentPage);        
        
        int total = ccService.getAllCcListCount(sn, version);    //總記錄數
        //System.out.println("總記錄數:"+total);
        
        if(0 == total){        //查詢沒有該數據時返回null
            return null;
        }
        
        int pageSize = 10;    //每頁顯示記錄數(默認10)
        
        if(total < pageSize){    //總記錄數小於每頁記錄數時
            pageSize = total;    
        }
        
        /*int totalPage = (total % pageSize) == 0 ? (total / pageSize) : (total / pageSize + 1) ;    //總頁數
        System.out.println("總頁數:"+totalPage);*/
        
        if(null == currentPage || "".equals(currentPage) ){
            currentPage = "1";    //默認第一頁
        }
        /*int rowStart = (Integer.valueOf(currentPage) -1) * pageSize;    //起始記錄行數
        System.out.println("起始記錄行數:"+rowStart);
        System.out.println("每頁記錄數："+ pageSize);*/
        
        PageUtil page = null;
        page = new PageUtil(pageSize, total, Integer.valueOf(currentPage));    // 每頁顯示的條數,總記錄數,當前頁
        
        List<CCinfo> cclist = null;
        cclist = ccService.getCcInfoList(sn, version, page.getStart(), page.getPageRecord());    //路由數據列表
        
        mav.addObject("page", page);    // 顯示的頁數
        mav.addObject("cclist", cclist);
        mav.addObject("sn", sn);
        mav.addObject("version",version);
        
        return mav;
    }

3、分頁工具類PageUtil

/**
 * 分頁工具包
 */
@SuppressWarnings("unused")
public class PageUtil {
    
    private int pageRecord;        // 每頁的記錄數
    private int totalRecord;    // 總記錄數
    private int totalPage;        // 總頁數
    private int currentPage = 1;    // 當前頁（默認第一頁）
  
    private int prePage;    // 上一頁
    private int nextPage;    // 下一頁
  
    private int pageNumStart;    // 頁碼顯示開始listbegin;
    private int pageNumEnd;        // 頁碼顯示結束listend;
    
    // 傳給mybatis，limit start,size
    private int start;    //起始記錄數
    private int size;    //每頁顯示的記錄數
    
    private String pageurl;
      
    public PageUtil() {
          
    }
    
    /**
     * @parms pageRecord 每頁面的記錄數,totalRecord 總記錄數,currentPage 當前頁
     * @return
     */
    public PageUtil(int pageRecord, int totalRecord, int currentPage) {
        this.pageRecord = pageRecord;
        this.currentPage = currentPage;
        setTotalRecord(totalRecord);
        setPageNumEnd(pageNumEnd);
        setPageNumStart(pageNumStart);
    }
  
    public int getPageRecord() {
        return pageRecord;
    }
  
    public void setPageRecord(int pageRecord) {
        this.pageRecord = pageRecord;
    }
  
    public int getTotalRecord() {
        return totalRecord;
    }
  
    public void setTotalRecord(int totalRecord) {
        this.totalRecord = totalRecord;
        //設置總頁數
        setTotalPage(this.totalRecord % this.pageRecord == 0 ? this.totalRecord
                / this.pageRecord : this.totalRecord / this.pageRecord + 1);
    }
  
    public int getTotalPage() {
        return totalPage;
    }
  
    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }
  
    public String getPageurl() {
        return pageurl;
    }

    public void setPageurl(String pageurl) {
        this.pageurl = pageurl;
    }

    // 獲取當前頁
    public int getCurrentPage() {
        return currentPage;
    }
  
    // 設置當前頁面
    public void setCurrentPage(int currentPage) {
        // 若是當前頁數大於總頁數，即當前頁等於總頁面數
        if (currentPage > getTotalPage()) {
            this.currentPage = getTotalPage();
        } else {
            if (currentPage < 1) {
                this.currentPage = 1;// 若是當前頁小於1，默認是1
            } else {
                this.currentPage = currentPage;
            }
        }
    }
  
    // 獲取下一頁
    public int getNextPage() {
        return this.getCurrentPage() + 1;
    }
  
    // 獲取上一頁
    public int getPrePage() {
        return this.getCurrentPage() - 1;
    }
  
    public int getPageNumStart() {
        return pageNumStart;
    }
  
    // 設置起始頁
    public void setPageNumStart(int pageNumStart) {
        this.pageNumStart = 1;
    }
  
    public int getPageNumEnd() {
        return pageNumEnd;
    }
  
    // 設置末頁
    public void setPageNumEnd(int pageNumEnd) {
        this.pageNumEnd = totalPage;
    }
  
    public int getStart() {
        return (this.currentPage - 1) * pageRecord ;//+ 1;
    }
  
    public int getSize() {
        return this.currentPage * pageRecord;
    }
  
}

View Code

4、前端核心代碼

<body>
    <div class="form-inline definewidth m20" id='tj'>
        <div align="center">
            序列號(S/N號):<input type="text" name="sn" id="sn"
            class="abc input-default" placeholder="" value="${sn}"
            maxlength="19" style="ime-mode:disabled" />&nbsp;&nbsp;
            
            版本號:<input type="text" name="version" id="version"
            class="abc input-default" placeholder="" value="${version}"
            maxlength="12" style="ime-mode:disabled" />&nbsp;&nbsp;
            <button class="btn btn-primary" onclick="page()">查詢</button>&nbsp;&nbsp;&nbsp;&nbsp;
            <br/>
        </div>
        
        <table id="table1" class="table table-bordered table-hover definewidth m10">
            <thead>
                <tr>
                    <th id="order">序列號（S/N）</th>
                    <th>當前版本</th>
                    <th>所在地</th>
                    <th>WAN口IP</th>
                    <th>更新時間</th>
                    <!-- <th><span onclick="sort('sn');">最後登陸時間(點擊排序)</span></th> -->
                    <th>操做</th>
                </tr>
            </thead>
            <c:forEach items="${cclist}" var="cc" varStatus="status">
                <tr>
                    <td>${cc.SN }</td>
                    <td>${cc.version}</td>
                    <td>${cc.remoteip}</td>
                    <td>${cc.wanip}</td>
                    <td><fmt:formatDate value="${cc.updateTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                    <td>
                        <a href="javascript:void(0);" onclick="regularlyUpgraded('${cc.SN }')">定時升級</a>&nbsp;&nbsp;
                        <a href="javascript:void(0);" onclick="regularReporting('${cc.SN }')">間隔上報</a>&nbsp;&nbsp;
                        <a href="javascript:void(0);" onclick="sendUpgrade2device('${cc.SN }')">當即升級</a>                        
                    </td>
                </tr>
            </c:forEach>
        </table>
    </div>
    
    <div id="pagelist" class="inline pull-right page">
        <span>總記錄 ${page.totalRecord} 條 / 共 ${page.totalPage} 頁  第 ${page.currentPage} 頁</span>
        <input onclick="page(this)" id="first" name="first" value="${page.pageNumStart}" type="image" src="${basePath}/static/Images/shouye.png">-
        <input onclick="page(this)" id="upPage" name="upPage" value="${page.prePage}" type="image" src="${basePath}/static/Images/shangyiye.png">-
        <input onclick="page(this)" id="nextPage" name="nextPage" value="${page.nextPage}" type="image" src="${basePath}/static/Images/xiayiye.png">-
        <input onclick="page(this)" id="last" name="last" value="${page.pageNumEnd}" type="image" src="${basePath}/static/Images/moye.png">        
    </div>
    
</body>
<script type="text/javascript">
//動態查詢和分頁
    function page(e) {
        
        var sn = $("#sn").val().trim();    //設備sn號
        //alert(sn);
        
        var version = $("#version").val().trim();    //設備版本號
        //alert(version);
        
        var currentPage = $(e).val();    //獲取要顯示的頁數
        //alert(currentPage);
        
        var totalPage = ${page.totalPage};    //最大頁數
        
        if(currentPage < 1){
            alert("已是第一頁了！");
        }else if(currentPage > totalPage){
            alert("已是最後一頁了！");
        }else{
            $.ajax({
                cache : false,
                type : "POST",
                url : "${basePath}/web/toRouterList",
                data : {
                    "sn" : sn,
                    "version" : version,
                    "currentPage":currentPage
                },
                async : true,
                error : function(request) {
                    alert("沒有該設備！");
                    
                },
                success : function(data) {
                    
                    if (data) {
                        var html = data+"";
                        $("body").html(html);//要刷新的頁面
                    }else{
                        alert("沒有該設備！");
                        window.location.reload();
                    }
                }
            });
        }
            
    }
    
</script>