Use datatables.js to allow filtering and sorting of entriesHEADmaster

Makes it easier to work with large sets.

2 files changed, 32 insertions, 2 deletions

diff --git a/pgmailmgr/mailmgr/templates/adm.html b/pgmailmgr/mailmgr/templates/adm.html
index 558687e..23ecfb5 100644
--- a/pgmailmgr/mailmgr/templates/adm.html
+++ b/pgmailmgr/mailmgr/templates/adm.html
@@ -7,8 +7,9 @@
 {%block content%}
 
 <a name="users"></a>
+<div class="row"><div class="col-md-6">
 <h2>Users</h2>
-<table class="table table-striped table-hover table-sm table-nonfluid">
+<table id="userTable" class="table table-striped table-hover table-condensed table-sm datatable-tbl">
 <thead>
   <tr>
     <th>Local part</th>
@@ -27,10 +28,12 @@
 </tbody>
 </table>
 <a href="/https/git.postgresql.org/adm/user/add/" class="btn btn-primary">Add new user</a>
+</div></div>
 
 <a name="forwarders"></a>
 <h2 class="mt-4">Forwarders</h2>
-<table class="table table-striped table-hover table-sm table-nonfluid">
+<div class="row"><div class="col-md-6">
+<table id="forwarderTable" class="table table-striped table-hover table-condensed table-sm datatable-tbl">
 <thead>
 <tr>
  <th>Local part</th>
@@ -49,5 +52,29 @@
 </tbody>
 </table>
 <a href="/https/git.postgresql.org/adm/forwarder/add/" class="btn btn-primary">Add new forwarder</a>
+</div></div>
+{%endblock%}
+
+{%block pagescript%}
+<script>
+  const utable = new DataTable('#userTable', {
+      'paging': false,
+      'info': false,
+      'columnDefs': [
+	  { targets: 'coltype-nosort', orderable: false},
+	  { targets: 'coltype-nosearch', searchable: false},
+      ],
+  });
+  $('#userTable').data('datatable', utable);
 
+  const ftable = new DataTable('#forwarderTable', {
+      'paging': false,
+      'info': false,
+      'columnDefs': [
+	  { targets: 'coltype-nosort', orderable: false},
+	  { targets: 'coltype-nosearch', searchable: false},
+      ],
+  });
+  $('#forwarderTable').data('datatable', ftable);
+</script>
 {%endblock%}
diff --git a/pgmailmgr/mailmgr/templates/base.html b/pgmailmgr/mailmgr/templates/base.html
index c90e129..df26fa4 100644
--- a/pgmailmgr/mailmgr/templates/base.html
+++ b/pgmailmgr/mailmgr/templates/base.html
@@ -7,6 +7,7 @@
 
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
+    <link href="https://cdn.datatables.net/v/dt/dt-3.0.1/datatables.min.css" rel="stylesheet">
 
     <title>postgresql.org Mail manager</title>
     <style>
@@ -59,5 +60,7 @@ body {
 
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.datatables.net/v/dt/dt-3.0.1/datatables.min.js" ></script>
+{%block pagescript%}{%endblock%}
   </body>
 </html>