使用vue实现分页

效果如上图，第一页显示5行数据

HTML代码如下

   <footer class="col-sm-12 footerbox navbar-fixed-bottom">
            <div class="row">
                
                
                <div class="col-sm-12">
                    <a class="btn btn-default" href="#" role="button">首页</a>
                    <a class="btn btn-default" href="#" role="button"><</a>
                    <!--<a v-for="(item,i) in pager" @click="toPager(i)" :class="['btn','btn-default',{active:item.status}]" role="button">{{item.id}}</a>-->
                   
                    <a v-for="(item,i) in pager" @click="toPager(i)" class="btn btn-default" role="button">{{item.id}}</a>
          

                    <a class="btn btn-default" href="#" role="button">></a>
                    <a class="btn btn-default" href="#" role="button" @click="toLast">尾页</a>
                </div>
            </div>
            </div>
        </footer>

 关键点在有v-for的那一行

pager是我在JS里面定义的，如下

var vue = new Vue({
    el: '.App',
    data: {
        adminMessageList: [{ ainNickname: 1, ainCreateTime: "高级效果图", number: 1 }, { ainNickname: 2, ainCreateTime: "中级效果图", number: 1 }, { ainNickname: 3, ainCreateTime: "一般效果图", number: 1 }],
        ddelAdminList:[],
        pager:[
            {id:1},
            {id:2},
            {id:3},
            {id:4},
            {id:5},
            {id:6},
            
        ],
    }
    ,
    created: function () {
        this.adminMessageList = this.getAdminMessage();
    },
    
    methods: {
        getAdminMessage() {
            var AdminMessageResult;
            $.ajax({
                type: "get",
                async: false, // 同步 一定会等数据返回
                data: {
                    currentPage:"1",
                    pageSize:"5"
                },
                url: "http://127.0.0.1:8088/admin/getAdminMessage",
                success(res) {
                    AdminMessageResult = res;
                },
                error(res) {
                }

            })
            return AdminMessageResult;
        },
        deleteSingle(i){
            let that = this;
           $.ajax({
            type: "get",
            async: true, // 同步 一定会等数据返回
            data: {
                ainNickname:this.adminMessageList[i].ainNickname,
            },
            url: "http://127.0.0.1:8088/admin/delete",
            success(res) {
            
           
                that.adminMessageList = res;
            },
            error(res) {
            }

        })

        },
        addadmin(){
            var admin = [{"ainAdminIdCd":"2021-08-16 16:33:15","ainId":2,"ainNickname":"admin","ainPhone":"18173350047","ainEmail":"1349578685@qq.com","ainCreateTime":"2021-08-16 16:33:15"}]
            this.adminMessageList.push(admin)

        },
        toPager(i){
            let that = this;
            alert(i+1)
           // this.pager[i].status  = true;
           $.ajax({
            type: "get",
            async: true, // 同步 一定会等数据返回
            data: {
                 currentPage:(i+1),
                    pageSize:"5"
            },
            url: "http://127.0.0.1:8088/admin/getAdminMessage",
            success(res) {
            
           
                that.adminMessageList = res;
            },
            error(res) {
            }

        })

        },
        toLast(){
            console.log ()
            alert(this.pager.length)
           
        }
}
}
)

 关键我用截图展示

这里用来显示1.2.3.4.5.6页

在v-for那一行还有一个方法toPager(i)，截图给大家看一下

 

先尝试一下alert(i+1)看能不能读取到你是点击的第一个，没问题了之后，就发送AJAX

传数据当前页和一页显示5个

回显的时候请注意红色框框内的，要用that，我也不知道为什么，反正用就对了

给大家展示一下后端接口

  /**
     * 分页查询管理员信息
     * @return
     */
    @ResponseBody
    @GetMapping("admin/getAdminMessage")
    public List<AdminInfo> getAdminMessage(@Param("param1")String currentPage, @Param("param2")String  pageSize){

        int  currentPagenum = Integer.parseInt(currentPage);
        int pageSizenum = Integer.parseInt(pageSize);

        List<AdminInfo> selectForPage = adminService.selectForPage((currentPagenum-1)*pageSizenum, pageSizenum);
        for (AdminInfo adminInfo : selectForPage) {
            System.out.println(adminInfo);
        }
        return selectForPage;
    }

 mapper也提供给大家

<select id="selectForPage" resultMap="adminInfoMapper">
      select * from admin_info limit #{param1},#{param2}
  </select>

浏览器访问，就OK了，实现前端用户点击分页盒子后端进行物理分页啦！且前端用了VUE能够实时刷新