在刚进入页面的时候，请求所有数据时候，拼接一个分页样式

 $("#page-info").children().remove();
  //插入上一页
 $("#page-info").append("<a class=\"prev\" href=\"\" onclick=\"prepage(-1)\"><<</a>");
  //插入具体的页码，如何设计得可拓展呢，
  if(pageNumber<=7){
      for(var i=1;i<=pageNumber;i++){
       $("#page-info").append('<a class=\"num\" onclick=\"gotopage(this)\">'+i+'</a>');
  }
  }else{
      for(var i=1;i<=7;i++){
          $("#page-info").append('<a class=\"num\" onclick=\"gotopage(this)\">'+i+'</a>');
       }
     $("#page-info").append('...');
  }
  //插入下一页
  $("#page-info").append("<a class=\"next\" href=\"\" onclick=\"nextpage(1)\">>></a>");

点击选中页码，请求当前页码，

 //请求指定页码数据
    gotopage = function(e){
        var pageIndex = $(e).text();
        tempIndex = pageIndex;
        setdemo();
        //进来订单页面，先查询一下所有订单
        $.ajax({
            type: 'get',
            url: "/getOrdersByIndex",
            timeout: 0,
            async: true,
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            data: {
                pageIndex:pageIndex
            },
            success: function (resultData) {
                 console.log(result.data);
                $("#orderslist-box tbody").children().remove();
                for (var i = 0; i < resultData.data.length; i++) {
                    var html =
                        '<tr><td>' + resultData.data[i].orderid + '</td>' +
                        '<td>' + resultData.data[i].productid + '</td>' +
                        '<td>' + resultData.data[i].totalprice + '</td>' +
                        '<td>' + resultData.data[i].paystate + '</td>' +
                        '<td>' + resultData.data[i].userid + '</td>' +
                        '<td>' + resultData.data[i].telephone + '</td>' +
                        '<td>' + resultData.data[i].paytime + '</td>';
                    if (resultData.data[i].paystate == 0) {
                        html += '<td id="opera-' + i + '" class="td-manage">' +
                            '<button onclick="changeState(\'' + resultData.data[i].orderid + '\',\'' + i + '\');">' + "确认订单" + '</button>' +
                            '<button onclick="cancelTheOrder(\'' + resultData.data[i].orderid + '\',\'' + i + '\');">' + "取消" + '</button>' +
                            '</td>' +
                            '</tr>';
                    } else if (resultData.data[i].paystate == 1) {
                        html += '<td>已支付</td></tr>';
                    } else if (resultData.data[i].paystate == 2) {
                        html += '<td>已取消</td></tr>';
                    }
                    $("#orderslist-box tbody").prepend(html);
                }
            },
            error:function(){

            }
        });
    };

后台数据库请求接口

@RequestMapping(value="/getOrdersByIndex")
    public BaseResponse getOrdersByIndex(@RequestParam("pageIndex")String pageIndex){
        BaseResponse response=new BaseResponse(StatusCode.Success);
        List<Orders> orders = new ArrayList<Orders>();
        orders = orderService.getAll();
        //pageindex是要指定查询的页码，每页20条数据
        int index = Integer.parseInt(pageIndex);
        if (index == 1) {
            orders.subList(0,orders.size()>=20?20:orders.size());
        }else{
            orders.subList((index-1)*20,((index)*20 > orders.size())?orders.size():index*20);
        }
        response.setData(orders);
        return response;
    }

利用了List的子集合返回了所有的数据，一个简单的分页实现，暂时不考虑性能和多线程下的安全性。