Encore buggé, mais fonctionne déjà

src/AssoBundle/Resources/views/Ajax/Membre/mainDisplay.html.twig

@@ -27,7 +27,7 @@
 
         <form id="pagination">
             <select class="custom-select custom-select-sm">
-                <option selected>Pagination</option>
+                <option value="-1" selected>Pagination</option>
                 <option value="3">3</option>
                 <option value="5">5</option>
                 <option value="10">10</option>
@@ -85,23 +85,18 @@
 
     let submitURL = null;
 
-    let step = 10;
-    let page = 1;
-    let col = 'id';
-    let order = 'ASC';
 
     let table = document.querySelector('table#maintab.membres');
     let tbody = table.querySelector('tbody');
 
+    let paginate = { 'step': 10, 'page': 1, 'col': 'id', 'order': 'DESC' };
+
     /*
     *   Recharge la table
     */
 
-    function reloadTableMembre(paginate = null)
+    function reloadTableMembre(paginate)
     {
-        if (paginate === null) {
-            let paginate = { 'step': 10, 'page': 1, 'col': 'id', 'order': 'ASC' };
-        }
 
         let membreURL = Routing.generate('api_membre_read_paginate', paginate);
 
@@ -189,7 +184,7 @@
 
         });
     }
-    reloadTableMembre();
+    reloadTableMembre(paginate);
 
     let form = document.querySelector('form[name=membre]');
 
@@ -201,7 +196,7 @@
     reloadBtns.forEach(function(reloadBtn) {
         reloadBtn.addEventListener('dblclick', function(e)
         {
-            reloadTableMembre();
+            reloadTableMembre(paginate);
         });
     });
 
@@ -233,7 +228,7 @@
         e.preventDefault();
         AJAX('POST', submitURL, function()
         {
-            reloadTableMembre();
+            reloadTableMembre(paginate);
             form.parentNode.classList.add('hidden');
         },
         form);
@@ -246,8 +241,13 @@
     let stepform = document.querySelector('form#pagination select');
     stepform.addEventListener('change', function(e)
     {
-        step = this.value;
-        reloadTableMembre({ 'step': step });
+
+        step = (this.value === '-1') ? 10 : this.value;
+
+        paginate.step = step;
+        console.log(paginate);
+
+        reloadTableMembre(paginate);
         console.log('change step='+ step);
     });
 
@@ -258,20 +258,26 @@
     let columns = document.querySelectorAll('th[scope="col"] a.btn-sort');
     columns.forEach(function(column)
     {
-
         let col = column.getAttribute('id');
+
         column.addEventListener('click', function(e)
         {
-            reloadTableMembre({ 'col': col, 'order': order });
-
-            let a = column.parentNode;
-            let b = document.createElement('i');
-            b.classList.add('fas', 'fa-caret-' + (order === 'DESC') ? 'down' : 'up');
-            a.appendChild(b);
-            console.log(a);
+            columns.forEach(function(column) {
+                let oldCaret  = column.parentNode.querySelector('i.fas');
+                if (oldCaret !== null) {
+                    oldCaret.remove();
+                }
+            });
+
+            paginate.col = col;
+            paginate.order = (paginate.order === 'ASC') ? 'DESC' : 'ASC';
+            reloadTableMembre(paginate);
+
+            let th = this.parentNode;
+            let newCaret = document.createElement('i');
+            newCaret.classList.add('fas', (paginate.order === 'DESC') ? 'fa-caret-down' : 'fa-caret-up');
+            th.appendChild(newCaret);
 
-            console.log('toggle id='+ col+ ' order='+ order);
-            order = (order === 'ASC') ? 'DESC' : 'ASC';
         });
     });