diff --git a/src/components/feature/FeatureListTable.vue b/src/components/feature/FeatureListTable.vue index 38e7a974ad17693beb892ba1a9f7c502a222a495..ed7f0dac060041a1badf0b1f4137cf458d8ba7b6 100644 --- a/src/components/feature/FeatureListTable.vue +++ b/src/components/feature/FeatureListTable.vue @@ -20,7 +20,10 @@ <th class="center"> Type <i - :class="{ down: isSortedAsc('type'), up: isSortedDesc('type') }" + :class="{ + down: isSortedAsc('type'), + up: isSortedDesc('type'), + }" class="icon sort" @click="changeSort('type')" /> @@ -28,7 +31,10 @@ <th class="center"> Nom <i - :class="{ down: isSortedAsc('nom'), up: isSortedDesc('nom') }" + :class="{ + down: isSortedAsc('nom'), + up: isSortedDesc('nom'), + }" class="icon sort" @click="changeSort('nom')" /> @@ -138,8 +144,9 @@ </tbody> </table> <div - class="dataTables_info" + v-if="nbPages.length > 1" id="table-features_info" + class="dataTables_info" role="status" aria-live="polite" > @@ -148,22 +155,27 @@ sur {{ filteredFeatures.length }} éléments </div> <div - class="dataTables_paginate paging_simple_numbers" + v-if="nbPages.length > 1" id="table-features_paginate" + class="dataTables_paginate paging_simple_numbers" > <a @click="toPreviousPage" - class="paginate_button previous disabled" + id="table-features_previous" + :class="[ + 'paginate_button previous', + { disabled: pagination.currentPage === 1 }, + ]" aria-controls="table-features" data-dt-idx="0" tabindex="0" - id="table-features_previous" >Précédent</a > <span> <a v-for="pageNumber in nbPages" :key="'page' + pageNumber" + @click="toPage(pageNumber)" :class="[ 'paginate_button', { current: pageNumber === pagination.currentPage }, @@ -176,11 +188,14 @@ </span> <!-- // TODO : <span v-if="nbPages > 4" class="ellipsis">...</span> --> <a - class="paginate_button next" + id="table-features_next" + :class="[ + 'paginate_button next', + { disabled: pagination.currentPage === nbPages.length }, + ]" aria-controls="table-features" data-dt-idx="7" tabindex="0" - id="table-features_next" @click="toNextPage" >Suivant</a > @@ -258,12 +273,10 @@ export default { let N = Math.round( this.filteredFeatures.length / this.pagination.pagesize ); - console.log("N", N); const arr = [...Array(N).keys()].map(function (x) { ++x; return x; }); - console.log("arr", arr); return arr; }, @@ -296,6 +309,14 @@ export default { } }, + toPage(pageNumber) { + const toAddOrRemove = + (pageNumber - this.pagination.currentPage) * this.pagination.pagesize; + this.pagination.start += toAddOrRemove; + this.pagination.end += toAddOrRemove; + this.pagination.currentPage = pageNumber; + }, + toPreviousPage() { if (this.pagination.start > 0) { this.pagination.start -= this.pagination.pagesize; @@ -369,6 +390,24 @@ export default { border: 1px solid transparent; border-radius: 2px; } +.dataTables_wrapper .dataTables_paginate .paginate_button:hover { + color: white !important; + border: 1px solid #111; + background-color: #585858; + background: -webkit-gradient( + linear, + left top, + left bottom, + color-stop(0%, #585858), + color-stop(100%, #111) + ); + background: -webkit-linear-gradient(top, #585858 0%, #111 100%); + background: -moz-linear-gradient(top, #585858 0%, #111 100%); + background: -ms-linear-gradient(top, #585858 0%, #111 100%); + background: -o-linear-gradient(top, #585858 0%, #111 100%); + background: linear-gradient(to bottom, #585858 0%, #111 100%); +} +.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { cursor: default; @@ -378,6 +417,10 @@ export default { box-shadow: none; } +i.icon.sort:not(.down):not(.up) { + color: rgb(220, 220, 220); +} + /* Max width before this PARTICULAR table gets nasty This query will take effect for any screen smaller than 760px