diff --git a/src/components/feature/FeatureListTable.vue b/src/components/feature/FeatureListTable.vue index db7b252a9bd3f864cb32f59351c08f80005d8b6f..6e1c8ada5acd69dc94352d6cd414ed3a34bdc5bc 100644 --- a/src/components/feature/FeatureListTable.vue +++ b/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); }