java+springboot+vue中的分页操作

最新推荐文章于 2025-06-01 17:05:40 发布

王者无敌77

最新推荐文章于 2025-06-01 17:05:40 发布

阅读量426

点赞数

CC 4.0 BY-SA版权

分类专栏： Java 框架学习

本文链接：https://blog.youkuaiyun.com/KingEverything/article/details/102664088

Java 同时被 2 个专栏收录

37 篇文章

订阅专栏

框架学习

37 篇文章

订阅专栏

本文详细介绍了一个基于Vue.js的分页组件实现过程，包括如何使用$.post进行异步数据请求，通过Vue的data属性管理和更新分页状态，以及如何在页面上动态渲染分页导航。同时，还介绍了后端控制器方法，用于处理分页请求并返回数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue代码
<script>
       var vm = new Vue({
           el:'#app',
           data:{
               all: 10, //总页数
               cur: 1,//当前页码
               totalPage: 0,//当前条数
           },
           mounted() {
               this.dataListFn(1); //调用分页的方法
           },
           methods:{
               //分页
               dataListFn: function(index){
                  // alert(1);
                   var page = index;
                   $.post("/stu/pageList",{NowPage:page},function (data) {
                       // alert(1);
                       vm.stu=[];
                       var len = data.content.length;
                       var dataList = data.content;//获取数据列表
                       for(var i = 0;i<len;i++){
                           vm.stu.push(dataList[i]);
                       }
                       vm.all=data.totalPages;//总页数
                       vm.cur = data.number+1;//当前页码
                       vm.totalPage = data.numberOfElements;//当前条数
                   })
               },
//分页
               btnClick: function(data){//页码点击事件
                   if(data != this.cur){
                       this.cur = data
                   }
//根据点击页数请求数据
                   this.dataListFn(this.cur.toString());
               },
               pageClick: function(){
//根据点击页数请求数据
                   this.dataListFn(this.cur.toString());
               }
           },
           computed: {
//分页
               indexs: function(){
                   var left = 1;
                   var right = this.all;
                   var ar = [];
                   if(this.all>= 5){
                       if(this.cur > 3 && this.cur < this.all-2){
                           left = this.cur - 2
                           right = this.cur + 2
                       }else{
                           if(this.cur<=3){
                               left = 1
                               right = 5
                           }else{
                               right = this.all
                               left = this.all -4
                           }
                       }
                   }
                   while (left <= right){
                       ar.push(left)
                       left ++
                   }
                   return ar
               }
           }
       })
    </script>

html代码

<!--分页-->
                <tr>
                    <td colspan="7" align="center" valign="middle"> <!--分页-->
                <div class="page-bar">
                    <ul>
                        <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>
                        <li v-if="cur==1"><a class="banclick">上一页</a></li>
                        <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
                            <a v-on:click="btnClick(index)">{{ index }}</a>
                        </li>
                        <li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>
                        <li v-if="cur == all"><a class="banclick">下一页</a></li>
                        <li><a>共<i>{{all}}</i>页</a></li>
                    </ul>
                </div>
                    </td>
                </tr>

分页中用到的controller方法代码

@RequestMapping("/pageList")
    @ResponseBody
    public Page<List<Map>> pageList(HttpServletRequest request){
        Sort sort = null;
        sort = new Sort(Sort.Direction.DESC,"uuid");
        Integer NowPage = Integer.parseInt(request.getParameter("NowPage"));
        System.out.println(NowPage);
        Pageable Page = PageRequest.of(NowPage-1,2,sort);
        Page<List<Map>> data = stuService.findAllMap(Page);
        return data;
    }

div样式

<style>
        /*分页*/
        .page-bar{
            margin:40px auto;
            margin-top: 150px;

        }
        ul,li{
            margin: 0px;
            padding: 0px;
        }
        li{
            list-style: none
        }
        .page-bar li:first-child>a {
            margin-left: 0px
        }
        .page-bar a{
            border: 1px solid #ddd;
            text-decoration: none;
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #5D6062;
            cursor: pointer;
            margin-right: 20px;
        }
        .page-bar a:hover{
            background-color: #eee;
        }
        .page-bar a.banclick{
            cursor:not-allowed;
        }
        .page-bar .active a{
            color: #fff;
            cursor: default;
            background-color: #E96463;
            border-color: #E96463;
        }
        .page-bar i{
            font-style:normal;
            color: #d44950;
            margin: 0px 4px;
            font-size: 12px;
        }
    </style>