WIP: adding ellipsis

src/components/feature/FeatureListTable.vue

@@ -198,8 +198,9 @@
         >Précédent</a
       >
       <span>
+        <span v-if="displayedPagesNumber[0] > 1" class="ellipsis">…</span>
         <a
-          v-for="pageNumber in pageNumbers"
+          v-for="pageNumber in displayedPagesNumber"
           :key="'page' + pageNumber"
           @click="$emit('update:page', pageNumber)"
           :class="[
@@ -211,8 +212,8 @@
           tabindex="0"
           >{{ pageNumber }}</a
         >
+        <span v-if="displayedPagesNumber.slice(-1)[0] < pageNumbers.slice(-1)[0]" class="ellipsis">…</span>
       </span>
-
       <a
         id="table-features_next"
         :class="[
@@ -243,6 +244,12 @@ export default {
     "sort",
   ],
 
+  data() {
+    return {
+      displayedPageStart: 0
+    }
+  },
+
   computed: {
     ...mapState(["user"]),
     ...mapGetters(["project", "permissions"]),
@@ -275,6 +282,10 @@ export default {
         ? this.featuresCount
         : this.pagination.end;
     },
+
+    displayedPagesNumber() {
+      return [...this.pageNumbers].splice(this.displayedPageStart, 5);
+    }
   },
 
   methods: {
@@ -396,6 +407,10 @@ export default {
   box-shadow: none;
 }
 
+.dataTables_wrapper .dataTables_paginate .ellipsis {
+  padding: 0 1em;
+}
+
 i.icon.sort:not(.down):not(.up) {
   color: rgb(220, 220, 220);
 }