js實現分頁

第一步：html

<div class="pagin fr" id="pagin-btm">

</div>

第二步：JS （jquery的JS需要導入，下面JS跳轉的路徑根據具體情況跳轉，如不想改變此JS，覆蓋方法改下路徑即可）

if (!window.SEARCH) {
    window.SEARCH = {}
}
SEARCH.bottom_page_html = function(e, k, j) {
    if (j) {
        this.page_num = e;
        e = Math.ceil(e / 2);
        k = Math.ceil(k / 2);
        var d = 2 * e - 3, g = 2 * e + 1
    } else {
        var d = e - 1, g = e + 1
    }
    if (k < 0) {
        return ""
    }
    var a = e - 2, b = Math.min(k, e + 2), f = "";
    if (b < 7) {
        b = Math.min(7, k)
    } else {
        a = b - 4
    }
    if (e <= 1) {
        f += '<span class="prev-disabled">上一頁<b></b></span>'
    } else {
        f += '<a οnclick="SEARCH.page(' + d + ', true)" href="javascript:;" class="prev" title="使用方向鍵左鍵也可翻到上一頁哦！">上一頁<b></b></a>'
    }
    for (var h = 1; h <= k; h++) {
        if (h <= 2 || h >= a && h <= b) {
            f += h == e ? '<a href="javascript:;" class="current">' + h + "</a>" : '<a οnclick="SEARCH.page(' + (j ? 2 * h - 1 : h) + ', true)" href="javascript:;">' + h + "</a>"
        } else {
            if (h < a) {
                f += '<span class="text">…</span>';
                h = a - 1
            } else {
                if (h > b) {
                    f += '<span class="text">…</span>';
                    break
                }
            }
        }
    }
    if (e >= k) {
        f += '<span class="next-disabled">下一頁<b></b></span>'
    } else {
        f += '<a οnclick="SEARCH.page(' + g + ', true)" href="javascript:;" class="next" title="使用方向鍵右鍵也可翻到下一頁哦！">下一頁<b></b></a>'
    }
    f += '<span class="page-skip"><em>  共' + k + '頁    到第</em><input class="jumpto" type="text" value="' + e + '" οnkeydοwn="javascript:if(event.keyCode==13){SEARCH.page_jump2(' + k + ');return false;}"/><em>頁</em><a class="btn-skipsearch" value="確定" οnclick="SEARCH.page_jump2(' + k + ')" href="javascript:;">確定</a></span>';
    $("#pagin-btm").html(f)
};
SEARCH.page = function(b, a) {
    b = parseInt(b, 10);
    if (b < 1) {
        b = 1
    }
    window.location = "/order/myOrder.html?page="+b;
};
SEARCH.page_jump2 = function(k) {
	    var c =$("#pagin-btm .jumpto").val();
	    if (isNaN(c)) {
	        c = 1;
	    }
		if(c>k){
			c=k;
		}
	   window.location = "/order/myOrder.html?page="+c;
};
SEARCH.query = "";
SEARCH.bottom_page_html(${page},${ totalPage },'');

第三步：樣式（本人不懂樣式）

第四步：controller裏提供數據和page、totalPage兩個參數，下面方法供參考

/**
     * 跳轉到我的訂單頁面
     */
    @SuppressWarnings({ "static-access", "unchecked" })
    @RequestMapping(value="myOrder",method = RequestMethod.GET)
    public ModelAndView toMyOrder(@RequestParam(value="page",defaultValue="1")Integer page,
            @RequestParam(value="rows",defaultValue="5")Integer rows){
        ModelAndView mv=new ModelAndView("my-orders");
        //查詢訂單數據
        UserThreadLocal userThreadLocal=new UserThreadLocal();
        User user=userThreadLocal.get();
        Map<String, Object> map= this.orderService.queryOrdersByUserName(user.getUsername(),page,rows);
        List<Order> lists=(List<Order>) map.get("orders");
        mv.addObject("orders",lists);
        mv.addObject("page", page);
        // 計算總頁數
        Integer total = (Integer) map.get("total");
        mv.addObject("totalPage", (total + rows - 1) / rows);
        return mv;
    }