no pagination if only one page, clic on page number and grey sort icons

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