Add support for DataTables in admin view

1 files changed, 20 insertions, 6 deletions

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 %}