• JPA+Springboot实现分页效果


    JPA+Springboot实现分页效果

    后端

    JPA 默认提供了一个分页类:org.springframework.data.domain.Page, 这个分页类已经能够满足各种分页需要了,所以大部分时候用它就足够了。但是除了一点,就是如图所示的,比如当前是第8页,前面要显示3个,后面要显示3个,总共7条分页点,这个类默认就不提供了。
    所以我们做了一个 Page4Navigator, 首先对 Page 类进行了封装,然后在构造方法里提供了一个 navigatePages 参数。

    navigatePages:导航需要的个数,这里设置为7,就表示如图所示的效果,前面3个,后面3个。

    效果如下

    思路:

    • 当总页数小于或等于导航页码数时,就遍历现有的页码总数,这种最简单了。

    • 当总页数大于导航页码数(7)时,现在当前页num为8,就计算出开始数num - navigatePages / 2和结尾数num + navigatePages / 2,这种情况下分别为5和11,对开始数5使用for循环7次,就可以得到一个int 数组变量 navigatepageNums [5,6,7,8,9,10,11],方便前端遍历展示。

    • 异常处理:

      • 若起始值小于1时,则起始值设置为1,对着起始值循环7次startNum++得到数组
      • 若结尾值大于总条数时,则结尾值设置为总条数,数组索引设置为6(7-1),对着结尾值循环7次endNum--得到数组

    工具类Page4Navigator

        private void calcNavigatepageNums() {
            int navigatepageNums[];
            int totalPages = getTotalPages();
            int num = getNumber();
            //当总页数小于或等于导航页码数时
            if (totalPages <= navigatePages) {
                navigatepageNums = new int[totalPages];
                for (int i = 0; i < totalPages; i++) {
                    navigatepageNums[i] = i + 1;
                }
            } else { //当总页数大于导航页码数时
                navigatepageNums = new int[navigatePages];
                int startNum = num - navigatePages / 2;
                int endNum = num + navigatePages / 2;
      
                if (startNum < 1) {
                    startNum = 1;
                    //(最前navigatePages页
                    for (int i = 0; i < navigatePages; i++) {
                        navigatepageNums[i] = startNum++;
                    }
                } else if (endNum > totalPages) {
                    endNum = totalPages;
                    //最后navigatePages页
                    for (int i = navigatePages - 1; i >= 0; i--) {
                        navigatepageNums[i] = endNum--;
                    }
                } else {
                    //所有中间页
                    for (int i = 0; i < navigatePages; i++) {
                        navigatepageNums[i] = startNum++;
                    }
                }
            } 
            this.navigatepageNums = navigatepageNums;
        }
    

    controller中传入需要的导航数:5页

        @GetMapping("/categories")
        public Page4Navigator<Category> list(@RequestParam(value = "start", defaultValue = "0") int start, @RequestParam(value = "size", defaultValue = "5") int size) throws Exception {
            start = start<0?0:start;
            Page4Navigator<Category> page =categoryService.list(start, size, 5);  //5表示导航分页最多有5个,像 [1,2,3,4,5] 这样
            return page;
        }
    

    service中调用封装好的工具类 Page4Navigator

        public Page4Navigator<Category> list(int start, int size, int navigatePages) {
            Sort sort = new Sort(Sort.Direction.DESC, "id");
            Pageable pageable = new PageRequest(start, size,sort);
            Page pageFromJPA =categoryDAO.findAll(pageable);
     
            return new Page4Navigator<>(pageFromJPA,navigatePages);
        }
    

    前端

    思路:

    • 开始加载的时候访问uri,mounted:function()调用method中的list()方法,传入参数0;

    • paginationbeans得到数据,取出数据放到分页条中

    • 点击最前页时,传入参数firstjump(page,vue),调用下面的同名函数jump()中的list(0),调用vuelist(0)。相当于vue提供的三个方法中间夹带着方法。


    构造出导航条

    <div class="pageDiv" th:fragment="html">
    	<nav>
    	  <ul class="pagination">
    	    <li :class="{ disabled: pagination.first }">
    	      <a  href="#nowhere" @click="jump('first')">«</a>
    	    </li>
    	    <li :class="{ disabled: !pagination.hasPrevious }">
    	      <a  href="#nowhere" @click="jump('pre')">‹</a>
    	    </li>		    
    
    		<li  v-for="i in pagination.navigatepageNums">
    			<a href="#nowhere" @click="jumpByNumber(i-1)" >
    				{{i}}
    			</a>
    		</li>
    
    	    <li :class="{ disabled: !pagination.hasNext }">
    	      <a  href="#nowhere" @click="jump('next')">›</a>
    	    </li>
    	    <li :class="{ disabled: pagination.last }">
    	      <a  href="#nowhere" @click="jump('last')">»</a>
    	    </li>		    
    	  </ul>
    	</nav>    
    </div>
    
        $(function(){
            var data4Vue = {
                uri:'categories',
                pagination:{},
                beans: []
            };
     
            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
                    this.list(0);
                },
                methods: {
                    list:function(start){
                        var url =  this.uri+ "?start="+start;
                        axios.get(url).then(function(response) {
                            vue.pagination = response.data;
                            vue.beans = response.data.content   ;
                        });
                    },
                    jump: function(page){
                        jump(page,vue); //定义在adminHeader.html 中
                    },
                    jumpByNumber: function(start){
                        jumpByNumber(start,vue);
                    }
                }
            });
        });
    
        //跳转函数
        function jump(page,vue){
    		if('first'== page && !vue.pagination.first)
    			vue.list(0);
    		
    		else if('pre'== page &&	vue.pagination.hasPrevious )
    			vue.list(vue.pagination.number-1);
    		
    		else if('next'== page && vue.pagination.hasNext)
    			vue.list(vue.pagination.number+1);					
    		
    		else if('last'== page && !vue.pagination.last)
    			vue.list(vue.pagination.totalPages-1);    	
        }
        //跳转函数
        function jumpByNumber(start,vue){
        	if(start!=vue.pagination.number)
    			vue.list(start);       	
        }
    
  • 相关阅读:
    vue scrollTop的使用方法
    常见简体繁体转换
    远程桌面发生身份验证错误,要求的函数不受支持
    发布版找不到字体,控制台会报错问题处理
    sql进阶-自增字段的数据修改
    sql序列(6)游标
    sql序列(1)新建文件夹、建库
    sql进阶-触发器的实现
    sql进阶-@@rowcount详解
    单条数据横向滚动
  • 原文地址:https://www.cnblogs.com/senup/p/12171248.html
Copyright © 2020-2023  润新知