🆕 Sorting in the Network tables #713

front/css/app.css

@@ -1238,6 +1238,13 @@ input[readonly] {
     /* background-color:red; */
 }
 
+.sort-btn {
+    
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+}
 
 
 /* ----------------------------------------------------------------- */

front/js/ui_components.js

@@ -270,6 +270,43 @@ function copyToClipboard(buttonElement) {
   }
 }
 
+// -----------------------------------------------------------------------------
+// Simple Sortable Table columns 
+// -----------------------------------------------------------------------------
+
+function sortColumn(element) {
+  var th = $(element).closest('th');
+  var table = th.closest('table');
+  var columnIndex = th.index();
+  var ascending = !th.data('asc');
+  sortTable(table, columnIndex, ascending);
+  th.data('asc', ascending);
+}
+
+function sortTable(table, columnIndex, ascending) {
+  var tbody = table.find('tbody');
+  var rows = tbody.find('tr').toArray().sort(comparer(columnIndex));
+  if (!ascending) {
+    rows = rows.reverse();
+  }
+  for (var i = 0; i < rows.length; i++) {
+    tbody.append(rows[i]);
+  }
+}
+
+function comparer(index) {
+  return function(a, b) {
+    var valA = getCellValue(a, index);
+    var valB = getCellValue(b, index);
+    return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB);
+  };
+}
+
+function getCellValue(row, index) {
+  return $(row).children('td').eq(index).text();
+}
+
+
 // -----------------------------------------------------------------------------
 // initialize
 // -----------------------------------------------------------------------------

front/network.php

@@ -7,6 +7,7 @@
   define('badge_offline', '<div class="badge bg-red text-white" style="width: 60px;">Offline</div>');
   define('circle_online', '<div class="badge bg-green text-white" style="width: 10px; height: 10px; padding:2px; margin-top: -25px;">&nbsp;</div>');
   define('circle_offline', '<div class="badge bg-red text-white" style="width: 10px;  height: 10px; padding:2px; margin-top: -25px;">&nbsp;</div>'); 
+  define('sortable_column', ' <span class="sort-btn" onclick="sortColumn(this)"><i class="fa-solid fa-arrow-up-short-wide"></i></span>'); 
   
 ?>
 
@@ -140,13 +141,18 @@
                              ';
 
         $str_table =      '   <table class="table table-striped">
-                                <tbody>
+                                <thead>
                                   <tr>
                                     <th  class="col-sm-1" >Port</th>
                                     <th  class="col-sm-1" >'.lang('Network_Table_State').'</th>
-                                  <th class="col-sm-2" >'.lang('Network_Table_Hostname').'</th>
+                                    <th  class="col-sm-2" >'.lang('Network_Table_Hostname').sortable_column.'</th>
-                                  <th class="col-sm-1" >'.lang('Network_Table_IP').'</th>
+                                    <th  class="col-sm-1" >'.lang('Network_Table_IP').sortable_column.'</th>
                                     <th  class="col-sm-3" >'.lang('Network_ManageLeaf').'</th>
+                                  </tr>
+                                </thead>
+                                <tbody>
+                                <tr>
+
                                 </tr>';
         
         // Prepare Array for Devices with Port value
@@ -383,13 +389,18 @@
                                 <i class="fa fa-laptop"></i> '.lang('Network_UnassignedDevices').'
                               </h3>
                               <table class="table table-striped">
-                                <tbody>
+                                <thead>
                                   <tr>
                                     <th  class="col-sm-1" ></th>
                                     <th  class="col-sm-1" >'.lang('Network_Table_State').'</th>
-                                  <th  class="col-sm-2" >'.lang('Network_Table_Hostname').'</th>
+                                    <th  class="col-sm-2" >'.lang('Network_Table_Hostname').sortable_column.'</th>
-                                  <th  class="col-sm-1" >'.lang('Network_Table_IP').'</th>
+                                    <th  class="col-sm-1" >'.lang('Network_Table_IP').sortable_column.'</th>
                                     <th  class="col-sm-3" >'.lang('Network_Assign').'</th>
+                                  </tr>
+                                </thead>
+                                <tbody>
+                                <tr>                              
+
                                 </tr>';   
 
       $str_table_rows = "";        
@@ -852,7 +863,6 @@
   // init Assign/Unassign buttons
   initButtons()
 
-
 </script>