Merge pull request #2042 from Moonlight63/tweak/DHCP-datatables

Tweak DHCP datatables
pi-hole · Jan 5, 2022 · eadd6c5 · eadd6c5
2 parents 4e8534a + f850264
commit eadd6c5
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 14 deletions.
diff --git a/scripts/pi-hole/js/settings.js b/scripts/pi-hole/js/settings.js
@@ -227,18 +227,22 @@ var leasetable, staticleasetable;
 $(function () {
   if (document.getElementById("DHCPLeasesTable")) {
     leasetable = $("#DHCPLeasesTable").DataTable({
-      dom: "<'row'<'col-sm-12'tr>><'row'<'col-sm-6'i><'col-sm-6'f>>",
+      dom:
+        "<'row'<'col-sm-4'l><'col-sm-8'f>>" +
+        "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
+        "<'row'<'col-sm-5'i><'col-sm-7'p>>",
+      lengthMenu: [
+        [5, 10, 25, 50, 100, -1],
+        [5, 10, 25, 50, 100, "All"],
+      ],
       columnDefs: [
         { bSortable: false, orderable: false, targets: -1 },
         {
           targets: [0, 1, 2],
           render: $.fn.dataTable.render.text(),
         },
       ],
-      paging: false,
-      scrollCollapse: true,
-      scrollY: "200px",
-      scrollX: true,
+      paging: true,
       order: [[2, "asc"]],
       stateSave: true,
       stateDuration: 0,
@@ -253,18 +257,22 @@ $(function () {
 
   if (document.getElementById("DHCPStaticLeasesTable")) {
     staticleasetable = $("#DHCPStaticLeasesTable").DataTable({
-      dom: "<'row'<'col-sm-12'tr>><'row'<'col-sm-12'i>>",
+      dom:
+        "<'row'<'col-sm-4'l><'col-sm-8'f>>" +
+        "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
+        "<'row'<'col-sm-5'i><'col-sm-7'p>>",
+      lengthMenu: [
+        [5, 10, 25, 50, 100, -1],
+        [5, 10, 25, 50, 100, "All"],
+      ],
       columnDefs: [
         { bSortable: false, orderable: false, targets: -1 },
         {
           targets: [0, 1, 2],
           render: $.fn.dataTable.render.text(),
         },
       ],
-      paging: false,
-      scrollCollapse: true,
-      scrollY: "200px",
-      scrollX: true,
+      paging: true,
       order: [[2, "asc"]],
       stateSave: true,
       stateSaveCallback: function (settings, data) {

diff --git a/settings.php b/settings.php
@@ -614,12 +614,11 @@ function convertseconds($argument)
                             <div class="col-md-12">
                                 <div class="box box-warning">
                                     <div class="box-header with-border">
-                                        <h3 class="box-title">DHCP leases</h3>
+                                        <h3 class="box-title">Currently active DHCP leases</h3>
                                     </div>
                                     <div class="box-body">
                                         <div class="row">
                                             <div class="col-md-12">
-                                                <label>Currently active DHCP leases</label>
                                                 <table id="DHCPLeasesTable" class="table table-striped table-bordered nowrap" width="100%">
                                                     <thead>
                                                         <tr>
@@ -648,10 +647,19 @@ function convertseconds($argument)
                                                         <?php } ?>
                                                     </tbody>
                                                 </table>
-                                                <br>
                                             </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-12">
+                                <div class="box box-warning">
+                                    <div class="box-header with-border">
+                                        <h3 class="box-title">Static DHCP leases configuration</h3>
+                                    </div>
+                                    <div class="box-body">
+                                        <div class="row">
                                             <div class="col-md-12">
-                                                <label>Static DHCP leases configuration</label>
                                                 <table id="DHCPStaticLeasesTable" class="table table-striped table-bordered nowrap" width="100%">
                                                     <thead>
                                                     <tr>