分页应该怎么写

mvc分页

//后台
 @GetMapping(value = "/orderList")
    @ApiOperation(value = "订单页面")
    public ModelAndView orderList(@ModelAttribute Order order,
                                  @ModelAttribute SearchVo searchVo,
                                  @ModelAttribute PageVo page) {
        ModelAndView mav = new ModelAndView();
        Member member = securityUtil.getCurrUser();
        order.setMemberId(member.getId());
        Integer pageSize = 5;
        page.setPageSize(pageSize);
        Page<Order> page1 = orderService.findByCondition(order, searchVo, PageUtil.initPage(page));
        for(Order order1 : page1.getContent())
        {
            List<OrderDetail> orderDetailList = orderDetailService.getOrderDetails(order1.getId());
            order1.setOrderDetailList(orderDetailList);
        }
        mav.addObject("order", order);
        mav.addObject("page", page1);
        mav.addObject("pageNumber", page.getPageNumber());
        mav.addObject("pageSize", pageSize);
        mav.setViewName("orderList");
        return mav;
    }


//lmpl方法
  @Override
    public Page<Order> findByCondition(Order order, SearchVo searchVo, Pageable pageable) {

        return orderDao.findAll(new Specification<Order>() {
            @Nullable
            @Override
            public Predicate toPredicate(Root<Order> root, CriteriaQuery<?> cq, CriteriaBuilder cb) {

                Path<Integer> statusField = root.get("status");
                Path<String> memberIdField = root.get("memberId");
                List<Predicate> list = new ArrayList<Predicate>();

                //状态
                if (order.getStatus() != null) {
                    list.add(cb.equal(statusField, order.getStatus()));
                }
                //会员
                if (order.getMemberId() != null) {
                    list.add(cb.equal(memberIdField, order.getMemberId()));
                }
                Predicate[] arr = new Predicate[list.size()];
                cq.where(list.toArray(arr));
                return null;
            }
        }, pageable);
    }

前端
<#include "/layout/header.ftl">
<div id="app">
    <div class="contentView">
        <div class="main">
            <#include "/layout/menus.ftl">
            <div class="mainRight">
                <div class="allTitle"><span class="background1"></span>
                    <h4>门票订单</h4>
                </div>
                <div class="orderTrip">
                    <div class="orderState">
                        <h4>订单状态：</h4>
                        <a :class="status == 99 ? 'spanCurrent' : ''" @click="statusChange(99)">全部</a>
                        <a v-for="item in statusList" :key="item.value" @click="statusChange(item.value)"
                        :class="status == item.value ? 'spanCurrent' : ''">{{item.name}}</a>                                        
                    </div>
                </div>
                <div class="orderForm">
                    <div class="headerOrderForm">
                        <ul>
                            <li class="w182">产品信息</li>
                            <li class="w266">预留信息</li>
                            <li class="w88">单价</li>
                            <li class="w88">总计</li>
                            <li class="w88">实付款</li>
                            <li class="w88">订单状态</li>
                            <li class="w110">操作</li>
                        </ul>
                    </div>
                    <div class="OrderFormList">
                    <#list page.content as order>
                        <table class="tab_bd" width="100%" border="1"> 
                            <tbody>
                                <tr class="orderNumber">
                                    <td colspan="7">
                                        <span>下单时间：${order.createTime?if_exists}</span>
                                        <span>订单号：${order.id?if_exists}</span>
                                        <#if order.status == 0>
                                            <a class="orderItemBtn background4 color4 payBtn"  href="/order/${order.id?if_exists}">去支付</a>
                                        <#elseif order.status == 1>
                                            <#--  <a class="orderItemBtn border" href="/order/${order.id?if_exists}">订单详情</a>  -->
                                        </#if>
                                    </td>
                                </tr>
                                <#list order.orderDetailList as orderDetail>                        
                                <tr class="formPadding">
                                    <td class="w182 sizeCenter">
                                        <p>${orderDetail.name?if_exists}</p>
                                    </td>
                                    <td class="w266 bookingMeg" style="padding:5px 0;">
                                        <p>入园日期：${orderDetail.date?string('yyyy-MM-dd')}</p>
                                        <#if orderDetail.startTime??>
                                        <p>预约时段：${orderDetail.startTime?string('hh:mm')} - ${orderDetail.endTime?string('hh:mm')}</p>
                                         </#if>
                                    </td>
                                    <td class="w88 sizeCenter">${orderDetail.price?if_exists}</td>
                                    <td class="w88 sizeCenter">x${orderDetail.count?if_exists}</td>
                                    <td class="w88 sizeCenter">${orderDetail.amount?if_exists}</td>
                                    <td class="w88 sizeCenter">
                                    <#if orderDetail.status == 0 && order.status != 0>
                                    未使用
                                    <#elseif orderDetail.status == 1>
                                    已使用
                                    </#if>
                                    </td>
                                    <td class="w110">
                                        <a class="orderItemBtn border" href="/orderDetail/${order.id?if_exists}">订单详情</a>
                                    </td>
                                </tr> 
                                </#list>                                  
                            </tbody>
                        </table>
                        </#list>
                    </div>
                </div>
                <div class="pageNum">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage" :page-size="${pageSize}" layout="prev, pager, next, jumper"
                    :total="${page.totalElements}">
                </el-pagination>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            <#if order.status??>
            status:${order.status},
            <#else>
            status:99,
            </#if>
            statusList:[{name:"未支付",value:0},{name:"已支付",value:1},{name:"已完成",value:9},{name:"已关闭",value:-1}],
            currentPage: ${pageNumber}
        },
        methods: {
            setPaginations(){
            
            },
            handleSizeChange(page_size) {
            
            },
            statusChange(status)
            {
                if(status == 99)
                {
                    window.location.href = "/orderList?pageNumber="+this.currentPage;
                }
                else
                {
                    window.location.href = "/orderList?status=" + status + "&pageNumber="+this.currentPage;
                }
            },
            handleCurrentChange(val) {
                if(this.status == 99)
                {
                    window.location.href = "/orderList?pageNumber="+val;
                }
                else
                {
                    window.location.href = "/orderList?status=" + this.status + "&pageNumber="+val;
                }
            }
        }
    })
</script>

<#include "/layout/footer.ftl">