效果如上图，第一页显示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能够实时刷新
