Include but hide ID column on the group management page. Add "Reset sorting" button enabling the user to go back to ID sorting (initial behavior, makes sure group 0 is at the top).

Signed-off-by: DL6ER <dl6er@dl6er.de>

scripts/pi-hole/js/groups-clients.js

@@ -334,7 +334,8 @@ function deleteClient() {
         showAlert(
           "success",
           "glyphicon glyphicon-trash",
-          "Successfully deleted client ", ip_name
+          "Successfully deleted client ",
+          ip_name
         );
         reload_client_suggestions();
         table.ajax.reload();

scripts/pi-hole/js/groups.js

@@ -61,6 +61,10 @@ function showAlert(type, icon, title, message) {
 
 $(document).ready(function() {
   $("#btnAdd").on("click", addGroup);
+  $("#resetButton").on("click", function() {
+    table.order([[0, "asc"]]).draw();
+    $("#resetButton").hide();
+  });
 
   table = $("#groupsTable").DataTable({
     ajax: {
@@ -70,6 +74,7 @@ $(document).ready(function() {
     },
     order: [[0, "asc"]],
     columns: [
+      { data: "id", visible: false },
       { data: "name" },
       { data: "enabled", searchable: false },
       { data: "description" },
@@ -144,6 +149,15 @@ $(document).ready(function() {
       return data;
     }
   });
+
+  table.on("order.dt", function() {
+    var order = table.order();
+    if (order[0][0] !== 0 || order[0][1] !== "asc") {
+      $("#resetButton").show();
+    } else {
+      $("#resetButton").hide();
+    }
+  });
 });
 
 function addGroup() {