Merge pull request #1948 from pi-hole/tweak/datatables

Tweak to datatables column rendering
pi-hole · Oct 28, 2021 · 5aeb52e · 5aeb52e
2 parents 98ec9ee + 0e483a8
commit 5aeb52e
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 10 deletions.
diff --git a/scripts/pi-hole/js/customcname.js b/scripts/pi-hole/js/customcname.js
@@ -64,6 +64,10 @@ $(function () {
           );
         },
       },
+      {
+        targets: "_all",
+        render: $.fn.dataTable.render.text(),
+      },
     ],
     lengthMenu: [
       [10, 25, 50, 100, -1],
@@ -82,6 +86,7 @@ $(function () {
       $(".deleteCustomCNAME").on("click", deleteCustomCNAME);
     },
   });
+
   // Disable autocorrect in the search box
   var input = document.querySelector("input[type=search]");
   input.setAttribute("autocomplete", "off");

diff --git a/scripts/pi-hole/js/customdns.js b/scripts/pi-hole/js/customdns.js
@@ -64,6 +64,10 @@ $(function () {
           );
         },
       },
+      {
+        targets: "_all",
+        render: $.fn.dataTable.render.text(),
+      },
     ],
     lengthMenu: [
       [10, 25, 50, 100, -1],

diff --git a/scripts/pi-hole/js/db_queries.js b/scripts/pi-hole/js/db_queries.js
@@ -340,8 +340,8 @@ $(function () {
         },
       },
       { width: "10%" },
-      { width: "40%", render: $.fn.dataTable.render.text() },
-      { width: "20%", type: "ip-address", render: $.fn.dataTable.render.text() },
+      { width: "40%" },
+      { width: "20%", type: "ip-address" },
       { width: "10%" },
       { width: "5%" },
     ],
@@ -355,6 +355,10 @@ $(function () {
         data: null,
         defaultContent: "",
       },
+      {
+        targets: "_all",
+        render: $.fn.dataTable.render.text(),
+      },
     ],
     initComplete: reloadCallback,
   });

diff --git a/scripts/pi-hole/js/groups-adlists.js b/scripts/pi-hole/js/groups-adlists.js
@@ -124,6 +124,16 @@ function initTable() {
       { data: "groups", searchable: false },
       { data: null, width: "80px", orderable: false },
     ],
+    columnDefs: [
+      {
+        targets: [0, 2],
+        orderable: false,
+      },
+      {
+        targets: "_all",
+        render: $.fn.dataTable.render.text(),
+      },
+    ],
     drawCallback: function () {
       $('button[id^="deleteAdlist_"]').on("click", deleteAdlist);
       // Remove visible dropdown to prevent orphaning

diff --git a/scripts/pi-hole/js/groups-clients.js b/scripts/pi-hole/js/groups-clients.js
@@ -97,6 +97,12 @@ function initTable() {
       { data: "groups", searchable: false },
       { data: "name", width: "80px", orderable: false },
     ],
+    columnDefs: [
+      {
+        targets: "_all",
+        render: $.fn.dataTable.render.text(),
+      },
+    ],
     drawCallback: function () {
       $('button[id^="deleteClient_"]').on("click", deleteClient);
       // Remove visible dropdown to prevent orphaning

diff --git a/scripts/pi-hole/js/groups-domains.js b/scripts/pi-hole/js/groups-domains.js
@@ -76,6 +76,12 @@ function initTable() {
       { data: "groups", searchable: false, visible: showtype === "all" },
       { data: null, width: "80px", orderable: false },
     ],
+    columnDefs: [
+      {
+        targets: "_all",
+        render: $.fn.dataTable.render.text(),
+      },
+    ],
     drawCallback: function () {
       $('button[id^="deleteDomain_"]').on("click", deleteDomain);
       // Remove visible dropdown to prevent orphaning

diff --git a/scripts/pi-hole/js/groups.js b/scripts/pi-hole/js/groups.js
@@ -27,6 +27,12 @@ $(function () {
       { data: "description" },
       { data: null, width: "60px", orderable: false },
     ],
+    columnDefs: [
+      {
+        targets: "_all",
+        render: $.fn.dataTable.render.text(),
+      },
+    ],
     drawCallback: function () {
       $('button[id^="deleteGroup_"]').on("click", deleteGroup);
     },

diff --git a/scripts/pi-hole/js/messages.js b/scripts/pi-hole/js/messages.js
@@ -114,6 +114,12 @@ $(function () {
       { data: "blob5", visible: false },
       { data: null, width: "80px", orderable: false },
     ],
+    columnDefs: [
+      {
+        targets: "_all",
+        render: $.fn.dataTable.render.text(),
+      },
+    ],
     drawCallback: function () {
       $('button[id^="deleteMessage_"]').on("click", deleteMessage);
       // Remove visible dropdown to prevent orphaning

diff --git a/scripts/pi-hole/js/network.js b/scripts/pi-hole/js/network.js
@@ -236,10 +236,10 @@ $(function () {
     order: [[6, "desc"]],
     columns: [
       { data: "id", visible: false },
-      { data: "ip", type: "ip-address", width: "10%", render: $.fn.dataTable.render.text() },
-      { data: "hwaddr", width: "10%", render: $.fn.dataTable.render.text() },
-      { data: "interface", width: "4%", render: $.fn.dataTable.render.text() },
-      { data: "name", width: "15%", render: $.fn.dataTable.render.text() },
+      { data: "ip", type: "ip-address", width: "10%" },
+      { data: "hwaddr", width: "10%" },
+      { data: "interface", width: "4%" },
+      { data: "name", width: "15%" },
       {
         data: "firstSeen",
         width: "8%",
@@ -266,6 +266,7 @@ $(function () {
       { data: "", width: "6%", orderable: false },
       { data: "", width: "6%", orderable: false },
     ],
+
     drawCallback: function () {
       $('button[id^="deleteNetworkEntry_"]').on("click", deleteNetworkEntry);
       // Remove visible dropdown to prevent orphaning
@@ -289,6 +290,10 @@ $(function () {
         data: null,
         defaultContent: "",
       },
+      {
+        targets: "_all",
+        render: $.fn.dataTable.render.text(),
+      },
     ],
   });
   // Disable autocorrect in the search box

diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js
@@ -323,8 +323,8 @@ $(function () {
         },
       },
       { width: "4%" },
-      { width: "36%", render: $.fn.dataTable.render.text() },
-      { width: "8%", type: "ip-address", render: $.fn.dataTable.render.text() },
+      { width: "36%" },
+      { width: "8%", type: "ip-address" },
       { width: "14%", orderData: 4 },
       { width: "8%", orderData: 5 },
       { width: "10%", orderData: 4 },
@@ -347,6 +347,10 @@ $(function () {
         data: null,
         defaultContent: "",
       },
+      {
+        targets: "_all",
+        render: $.fn.dataTable.render.text(),
+      },
     ],
     initComplete: function () {
       var api = this.api();

diff --git a/scripts/pi-hole/js/settings.js b/scripts/pi-hole/js/settings.js
@@ -216,7 +216,13 @@ $(function () {
   if (document.getElementById("DHCPLeasesTable")) {
     leasetable = $("#DHCPLeasesTable").DataTable({
       dom: "<'row'<'col-sm-12'tr>><'row'<'col-sm-6'i><'col-sm-6'f>>",
-      columnDefs: [{ bSortable: false, orderable: false, targets: -1 }],
+      columnDefs: [
+        { bSortable: false, orderable: false, targets: -1 },
+        {
+          targets: "_all",
+          render: $.fn.dataTable.render.text(),
+        },
+      ],
       paging: false,
       scrollCollapse: true,
       scrollY: "200px",
@@ -236,7 +242,13 @@ $(function () {
   if (document.getElementById("DHCPStaticLeasesTable")) {
     staticleasetable = $("#DHCPStaticLeasesTable").DataTable({
       dom: "<'row'<'col-sm-12'tr>><'row'<'col-sm-12'i>>",
-      columnDefs: [{ bSortable: false, orderable: false, targets: -1 }],
+      columnDefs: [
+        { bSortable: false, orderable: false, targets: -1 },
+        {
+          targets: "_all",
+          render: $.fn.dataTable.render.text(),
+        },
+      ],
       paging: false,
       scrollCollapse: true,
       scrollY: "200px",