ajout d'un bouton pour réinitialiser l'ordre de tri des col

js/gamutable.es6.js

@@ -22,6 +22,16 @@ function recupJson(d) {
 		return [];
 	}
 }
+const orderBy = (arr, props, orders) =>
+	arr.sort((a, b) =>
+		props.reduce((acc, prop, i) => {
+			if (acc === 0) {
+				const [p1, p2] = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]];
+				acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
+			}
+			return acc;
+		}, 0)
+	);
 console.time('Chargement de VueJS AVANT Ajax');
 console.time('Chargement de VueJs APRES Ajax');
 Vue.nextTick(function() {
@@ -132,16 +142,6 @@ let monTableau = {
 				this.triProps.push(col);
 				this.triOrders.push(sens);
 			}
-			const orderBy = (arr, props, orders) =>
-				arr.sort((a, b) =>
-					props.reduce((acc, prop, i) => {
-						if (acc === 0) {
-							const [p1, p2] = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]];
-							acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
-						}
-						return acc;
-					}, 0)
-				);
 			this.table = orderBy(this.table, this.triProps, this.triOrders);
 		},
 		ordreActif(col, sens) {
@@ -151,6 +151,11 @@ let monTableau = {
 					return 'active';
 				}
 			}
+		},
+		resetTri() {
+			this.table = orderBy(this.table, ['id']);
+			this.triOrders = [];
+			this.triProps = [];
 		}
 	},
 	template: `
@@ -162,6 +167,7 @@ let monTableau = {
 					<option v-for="v in tparpage" :key="v">{{v}}</option>
 				</select>
 				<input type="text" v-model="search" placeholder="Rechercher">
+				<button class="btn" type="button" @click.stop="resetTri()">Réinitialiser les tris des colonnes</button>
 			</div>
 			<table class="table table--zebra">
 				<thead>

js/gamutable.js

@@ -34,6 +34,23 @@ function recupJson(d) {
   }
 }
 
+var orderBy = function orderBy(arr, props, orders) {
+  return arr.sort(function (a, b) {
+    return props.reduce(function (acc, prop, i) {
+      if (acc === 0) {
+        var _ref = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]],
+            _ref2 = _slicedToArray(_ref, 2),
+            p1 = _ref2[0],
+            p2 = _ref2[1];
+
+        acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
+      }
+
+      return acc;
+    }, 0);
+  });
+};
+
 console.time('Chargement de VueJS AVANT Ajax');
 console.time('Chargement de VueJs APRES Ajax');
 Vue.nextTick(function () {
@@ -151,23 +168,6 @@ var monTableau = {
         this.triOrders.push(sens);
       }
 
-      var orderBy = function orderBy(arr, props, orders) {
-        return arr.sort(function (a, b) {
-          return props.reduce(function (acc, prop, i) {
-            if (acc === 0) {
-              var _ref = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]],
-                  _ref2 = _slicedToArray(_ref, 2),
-                  p1 = _ref2[0],
-                  p2 = _ref2[1];
-
-              acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
-            }
-
-            return acc;
-          }, 0);
-        });
-      };
-
       this.table = orderBy(this.table, this.triProps, this.triOrders);
     },
     ordreActif: function ordreActif(col, sens) {
@@ -178,9 +178,14 @@ var monTableau = {
           return 'active';
         }
       }
+    },
+    resetTri: function resetTri() {
+      this.table = orderBy(this.table, ['id']);
+      this.triOrders = [];
+      this.triProps = [];
     }
   },
-  template: "\n\t<div>\n\t\t<h3> {{ message }}</h3>\n\t\t<div class=\"table\">\n\t\t\t<div class=\"gamutable--surTable\">\n\t\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t\t</select>\n\t\t\t\t<input type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\t\t\t</div>\n\t\t\t<table class=\"table table--zebra\">\n\t\t\t\t<thead>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<th v-for=\"(head,i) in header\" :key=\"'head_'+i\" :class=\"head\">\n\t\t\t\t\t\t\t{{head}}\n\t\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</th>\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.id\">\n\t\t\t\t\t\t<td v-for=\"(td,name, i) in l\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.id), name]\" v-html=\"td\">\n\t\t\t\t\t\t\t{{td}}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div>{{table.length}} \xE9l\xE9ments</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
+  template: "\n\t<div>\n\t\t<h3> {{ message }}</h3>\n\t\t<div class=\"table\">\n\t\t\t<div class=\"gamutable--surTable\">\n\t\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t\t</select>\n\t\t\t\t<input type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\t\t\t\t<button class=\"btn\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t\t</div>\n\t\t\t<table class=\"table table--zebra\">\n\t\t\t\t<thead>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<th v-for=\"(head,i) in header\" :key=\"'head_'+i\" :class=\"head\">\n\t\t\t\t\t\t\t{{head}}\n\t\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</th>\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.id\">\n\t\t\t\t\t\t<td v-for=\"(td,name, i) in l\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.id), name]\" v-html=\"td\">\n\t\t\t\t\t\t\t{{td}}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div>{{table.length}} \xE9l\xE9ments</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
 };
 var app = new Vue({
   el: '#app',