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_datasets.html | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

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

diff --git a/app/templates/admin/manage_datasets.html b/app/templates/admin/manage_datasets.html
index f68259f..c7df06e 100644
--- a/app/templates/admin/manage_datasets.html
+++ b/app/templates/admin/manage_datasets.html
@@ -1,4 +1,8 @@
 {% extends "base.html" %}
+{% block styles %}
+{{ super() }}
+<link rel="stylesheet" href="{{ bootstrap_find_resource('css/jquery.dataTables.css', cdn='datatables', use_minified=True) }}">
+{% endblock %}
 
 {% block app_content %}
 <h1>Manage Datasets</h1>
@@ -38,7 +42,7 @@
 <br>
 <h1>Task Completion Overview</h1>
 <article class="overview">
-	<table class="table table-striped">
+	<table id="datasets-table" class="table table-striped">
 		<thead class="thead-dark">
 			<th scope="col">ID</th>
 			<th scope="col">Name</th>
@@ -60,11 +64,21 @@
 		</tr>
 	</table>
 </article>
+{% endblock %}
 
+{% block scripts %}
+{{ super() }}
+<script src="{{ bootstrap_find_resource('js/jquery.dataTables.js', cdn='datatables', use_minified=True) }}"></script>
 <script>
-var conf = document.getElementById("modal-confirm");
-conf.onclick = function() {
-	document.getElementById("form-submit").click();
-};
+	$(document).ready(function() {
+		$('#datasets-table').DataTable();
+	});
 </script>
-{% endblock %}
+<script>
+	var conf = document.getElementById("modal-confirm");
+	conf.onclick = function() {
+		document.getElementById("form-submit").click();
+	};
+</script>
+
+{% endblock scripts %}
-- 
cgit v1.2.3