From 3f18897ad2fe0069a8a7ef9a52ccdefb695bd992 Mon Sep 17 00:00:00 2001
From: Gertjan van den Burg <gertjanvandenburg@gmail.com>
Date: Wed, 5 Jun 2019 17:22:55 +0100
Subject: Add support for DataTables in admin view

---
 app/templates/admin/manage_users.html | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

(limited to 'app/templates/admin/manage_users.html')

diff --git a/app/templates/admin/manage_users.html b/app/templates/admin/manage_users.html
index 8788958..0e365d4 100644
--- a/app/templates/admin/manage_users.html
+++ b/app/templates/admin/manage_users.html
@@ -1,4 +1,8 @@
 {% extends "base.html" %}
+{% block styles %}
+{{ super() }}
+<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
+{% endblock %}
 
 {% block app_content %}
   <h1>Manage Users</h1>
@@ -38,7 +42,7 @@
   <br>
   <h1>User Overview</h1>
   <article class="overview">
-    <table class="table table-striped">
+    <table id="user-table" class="table table-striped">
       <thead class="thead-dark">
         <th scope="col">ID</th>
         <th scope="col">Username</th>
@@ -62,11 +66,20 @@
       </tr>
     </table>
   </article>
-
-  <script>
-    var conf = document.getElementById("modal-confirm");
-    conf.onclick = function() {
-      document.getElementById("form-submit").click();
-    };
-  </script>
 {% endblock %}
+
+{% block scripts %}
+{{ super() }}
+<script src="{{ bootstrap_find_resource('js/jquery.dataTables.js', cdn='datatables', use_minified=True) }}"></script>
+<script>
+	$(document).ready(function() {
+		$('#user-table').DataTable();
+	});
+</script>
+<script>
+	var conf = document.getElementById("modal-confirm");
+	conf.onclick = function() {
+		document.getElementById("form-submit").click();
+	};
+</script>
+{% endblock scripts %}
-- 
cgit v1.2.3