Use datatable for registration list

This makes it possible to search the registration list, and also to
re-sort it without a server roundtrip. Makes it easier to work with long
lists of registrations.

diff --git a/template/confreg/admin_registration_list.html b/template/confreg/admin_registration_list.html
index b40c678530814790f71e61db0768bf0e112f7357..ec2a7719e82c3932d3c6785443fddfcbd4ca65c3 100644 (file)
--- a/template/confreg/admin_registration_list.html
+++ b/template/confreg/admin_registration_list.html
@@ -2,6 +2,8 @@
 {%load date_or_string%}
 {%block title%}Conference registrations{%endblock%}
 {%block extrahead%}
+<link rel="stylesheet" type="text/css" href="/media/datatables/datatables.min.css"/>
+<script type="text/javascript" src="/media/datatables/datatables.min.js"></script>
 <style>
 tr.warning {
    font-style: italic;
@@ -10,6 +12,20 @@ a.nocolor {
    color:black;
 }
 </style>
+
+<script language="javascript">
+$(document).ready(function() {
+   $('.datatable-tbl').DataTable({
+      'paging': false,
+      'info': false,
+      'columnDefs': [
+         { targets: 'coltype-nosort', orderable: false},
+         { targets: 'coltype-nosearch', searchable: false},
+
+      ],
+   });
+});
+</script>
 {%endblock%}
 
 {%block layoutblock%}
@@ -18,15 +34,18 @@ a.nocolor {
  Total {{regsummary.confirmed}} confirmed and {{regsummary.unconfirmed}} unconfirmed registrations.
 </p>
 
-<table class="table table-bordered table-striped table-hover table-condensed">
+<table class="table table-bordered table-striped table-hover table-condensed datatable-tbl">
+<thead>
  <tr>
   <th><a href="?sort={%if sortkey == "last" %}-{%endif%}last">Last name</a></th>
   <th><a href="?sort={%if sortkey == "first" %}-{%endif%}first">First name</a></th>
   <th><a href="?sort={%if sortkey == "company" %}-{%endif%}company">Company</a></th>
   <th><a href="?sort={%if sortkey == "typ" %}-{%endif%}type">Registration type</a></th>
-  <th><a href="?sort={%if sortkey == "date" %}-{%endif%}date">Confirmed</a></th>
+  <th class="coltype-nosearch"><a href="?sort={%if sortkey == "date" %}-{%endif%}date">Confirmed</a></th>
   {%if waitlist_active%}<th>Waitlist status</th>{%endif%}
  </tr>
+</thead>
+<tbody>
 {%for r in regs%}
  <tr {%if not r.payconfirmedat%}class="warning"{%endif%}>
   <td><a class="nocolor" href="{{r.id}}/"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a> {{r.lastname}}</td>
@@ -43,6 +62,7 @@ a.nocolor {
 {%endif%}
  </tr>
 {%endfor%}
+</tbody>
 </table>
 
 <a class="btn btn-default btn-block" href="/events/admin/{{conference.urlname}}/regdashboard/">Back to registration dashboard</a>