解决分页 页数太多的问题

WebService/src/main/resources/components/paginationPackage/pagination.html

@@ -1,13 +1,20 @@
 <nav aria-label="Page navigation example">
     <ul class="pagination justify-content-end">
         <li class="page-item" v-bind:class="{disabled:paginationInfo.currentPage == 1}">
-            <a class="page-link" v-on:click="previous()">上一页</a>
+            <a class="page-link" v-on:click="current(1)"> << </a>
         </li>
-        <li class="page-item"  v-for="index in paginationInfo.total" v-bind:class="{active:index == paginationInfo.currentPage}">
-            <a class="page-link" v-on:click="current(index)">{{index}}</a>
+        <li class="page-item" v-bind:class="{disabled:paginationInfo.currentPage == 1}">
+            <a class="page-link" v-on:click="previous()"> < </a>
+        </li>
+        <li class="page-item" v-for="pageInfo in paginationInfo.pageList" v-bind:class="{active:pageInfo.currentPage}">
+            <a class="page-link" v-on:click="current(pageInfo.page)">{{pageInfo.pageView}}</a>
+        </li>
+        <li class="page-item" v-bind:class="{disabled:paginationInfo.currentPage == paginationInfo.total}">
+            <a class="page-link" v-on:click="next()"> > </a>
         </li>
         <li class="page-item" v-bind:class="{disabled:paginationInfo.currentPage == paginationInfo.total}">
-            <a class="page-link" v-on:click="next()">下一页</a>
+            <a class="page-link" v-on:click="current(paginationInfo.total)"> >> </a>
         </li>
+        <span class="total">共 {{paginationInfo.total}} 条</span>
     </ul>
 </nav>

WebService/src/main/resources/components/paginationPackage/pagination.js

@@ -1,50 +1,163 @@
 /**
-    分页组件
-**/
-(function(vc){
+ 分页组件
+ **/
+(function (vc) {
     vc.extends({
-        data:{
-            paginationInfo:{
-                total:0,
-                currentPage:1
+        data: {
+            paginationInfo: {
+                total: 0,
+                currentPage: 1,
+                pageList: []
             }
         },
-        _initEvent:function(){
-             vc.component.$on('pagination_info_event',function(_paginationInfo){
-                    vc.component.paginationInfo.total = _paginationInfo.total;
-                    vc.component.paginationInfo.currentPage = _paginationInfo.currentPage;
-                });
+        _initEvent: function () {
+            vc.component.$on('pagination_info_event', function (_paginationInfo) {
+                vc.component.paginationInfo.total = _paginationInfo.total;
+                vc.component.paginationInfo.currentPage = _paginationInfo.currentPage;
+                vc.component._freshPageList();
+            });
 
-             vc.on('pagination','init',function(_paginationInfo){
-                 vc.component.paginationInfo.total = _paginationInfo.total;
-                 vc.component.paginationInfo.currentPage = _paginationInfo.currentPage;
-             });
+            vc.on('pagination', 'init', function (_paginationInfo) {
+                vc.component.paginationInfo.total = _paginationInfo.total;
+                vc.component.paginationInfo.currentPage = _paginationInfo.currentPage;
+                vc.component._freshPageList();
+            });
         },
-        methods:{
-            previous:function(){
+        methods: {
+            previous: function () {
                 // 当前页为 1时 不触发消息
-                if(vc.component.paginationInfo.currentPage <=1){
+                if (vc.component.paginationInfo.currentPage <= 1) {
                     return;
                 }
-                vc.component.paginationInfo.currentPage = vc.component.paginationInfo.currentPage -1;
-                vc.component.$emit('pagination_page_event',vc.component.paginationInfo.currentPage);
+                vc.component.paginationInfo.currentPage = vc.component.paginationInfo.currentPage - 1;
+                vc.component.$emit('pagination_page_event', vc.component.paginationInfo.currentPage);
             },
-            next:function(){
-                if(vc.component.paginationInfo.currentPage >=vc.component.paginationInfo.total){
-                    return ;
+            next: function () {
+                if (vc.component.paginationInfo.currentPage >= vc.component.paginationInfo.total) {
+                    return;
                 }
-                vc.component.paginationInfo.currentPage = vc.component.paginationInfo.currentPage +1;
-                vc.component.$emit('pagination_page_event',vc.component.paginationInfo.currentPage);
+                vc.component.paginationInfo.currentPage = vc.component.paginationInfo.currentPage + 1;
+                vc.component.$emit('pagination_page_event', vc.component.paginationInfo.currentPage);
 
             },
-            current:function(_page){
-                if(_page > vc.component.paginationInfo.total){
-                    return ;
+            current: function (_page) {
+                if(_page == -1){
+                    return;
+                }
+                if (_page > vc.component.paginationInfo.total) {
+                    return;
                 }
                 vc.component.paginationInfo.currentPage = _page;
 
-                vc.component.$emit('pagination_page_event',vc.component.paginationInfo.currentPage);
-
+                vc.component.$emit('pagination_page_event', vc.component.paginationInfo.currentPage);
+            },
+            _freshPageList: function () {
+                var current = vc.component.paginationInfo.currentPage;
+                var total = vc.component.paginationInfo.total;
+                vc.component.paginationInfo.pageList = [];
+                if (total > 6) {
+                    //当前页数小于5时显示省略号
+                    if (current < 5) {
+                        for (var i = 1; i < 6; i++) {
+                            if (current == i) {
+                                vc.component.paginationInfo.pageList.push({
+                                    "page": i,
+                                    "pageView": i + "",
+                                    "currentPage": true
+                                });
+                            } else {
+                                vc.component.paginationInfo.pageList.push({
+                                    "page": i,
+                                    "pageView": i + "",
+                                    "currentPage": false
+                                });
+                            }
+                        }
+                        vc.component.paginationInfo.pageList.push({
+                            "page": -1,
+                            "pageView": "...",
+                            "currentPage": false
+                        });
+                        vc.component.paginationInfo.pageList.push({
+                            "page": total,
+                            "pageView": total + "",
+                            "currentPage": false
+                        });
+                    } else {
+                        //判断页码在末尾的时候
+                        if (current < total - 3) {
+                            for (var i = current - 2; i < current + 3; i++) {
+                                if (current == i) {
+                                    vc.component.paginationInfo.pageList.push({
+                                        "page": i,
+                                        "pageView": i + "",
+                                        "currentPage": true
+                                    });
+                                } else {
+                                    vc.component.paginationInfo.pageList.push({
+                                        "page": i,
+                                        "pageView": i + "",
+                                        "currentPage": false
+                                    });
+                                }
+                            }
+                            vc.component.paginationInfo.pageList.push({
+                                "page": -1,
+                                "pageView": "...",
+                                "currentPage": false
+                            });
+                            vc.component.paginationInfo.pageList.push({
+                                "page": total,
+                                "pageView": total + "",
+                                "currentPage": false
+                            });
+                            //页码在中间部分时候
+                        } else {
+                            vc.component.paginationInfo.pageList.push({
+                                "page": 1,
+                                "pageView": 1 + "",
+                                "currentPage": false
+                            });
+                            vc.component.paginationInfo.pageList.push({
+                                "page": -1,
+                                "pageView": "...",
+                                "currentPage": false
+                            });
+                            for (var i = total - 4; i < total + 1; i++) {
+                                if (current == i) {
+                                    vc.component.paginationInfo.pageList.push({
+                                        "page": i,
+                                        "pageView": i + "",
+                                        "currentPage": true
+                                    });
+                                } else {
+                                    vc.component.paginationInfo.pageList.push({
+                                        "page": i,
+                                        "pageView": i + "",
+                                        "currentPage": false
+                                    });
+                                }
+                            }
+                        }
+                    }
+                    //页面总数小于6的时候
+                } else {
+                    for (var i = 1; i < total + 1; i++) {
+                        if (current == i) {
+                            vc.component.paginationInfo.pageList.push({
+                                "page": i,
+                                "pageView": i + "",
+                                "currentPage": true
+                            });
+                        } else {
+                            vc.component.paginationInfo.pageList.push({
+                                "page": i,
+                                "pageView": i + "",
+                                "currentPage": false
+                            });
+                        }
+                    }
+                }
             }
         }
     });