dbroqua/MusicTopus
2
0
Fork 1
Code Issues 13 Pull requests 1 Projects Releases 14 Packages Wiki Activity Actions

Optimisation de la pagination

Browse source
This commit is contained in:
Damien Broqua 2022-02-24 08:24:20 +01:00
parent a175e39eed
commit ecd54491a7
3 changed files with 52 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

8
views/pages/mon-compte/ma-collection.ejs
View file

@ -76,18 +76,14 @@
<strong>Nombre total d'éléments : </strong>{{total}}
</div>
<nav class="pagination" role="navigation" aria-label="Pagination">
<div class="pagination-previous-next">
<a class="pagination-previous" :class="{'is-disabled': page === 1}" @click="previous">Précédent</a>
<a class="pagination-next" :class="{'is-disabled': !total || (page*limit) >= total}" @click="next">Suivant</a>
</div>
<ul class="pagination-list">
<template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
<template v-if="p < 4 || p > (totalPages - 3) || (page - 3) <= p && page + 3 >= p">
<template v-if="p < 2 || p > (totalPages - 1) || (page - 1) <= p && page + 1 >= p">
<li>
<a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Aller à la page {{p}}">{{ p }}</a>
</li>
</template>
<template v-if="(page - 3 - 1 === p && page - 4 > 3) || (page + 4 === p && page + 3 < totalPages - 3)">
<template v-if="(page - 3 === p && page - 2 > 1) || (page + 2 === p && page + 2 < totalPages - 1)">
<li>
<a class="pagination-link is-disabled">…</a>
</li>