Add searchable User table.

app/main/views.py

@@ -60,6 +60,7 @@ def dashboard():
 def for_admins_only():
     users = User.query.order_by(User.username).all()
     items = [AdminUserItem(u.username, u.email, u.role_id, u.confirmed) for u in users]
-    table = AdminUserTable(items)
+    table = AdminUserTable(items).__html__()  # converts table object to html string
+    table = table.replace('tbody', 'tbody class="list"', 1)  # add class list to tbody element. Needed by list.js
     return render_template('main/admin.html.j2', title='Administration tools',
-                           table=table.__html__())
+                           table=table)

app/tables.py

@@ -6,10 +6,10 @@ class AdminUserTable(Table):
     Declares the table describing colum by column.
     """
     classes = ['highlight', 'responsive-table']
-    username = Col('Username')
-    email = Col('Email')
-    role_id = Col('Role')
-    confirmed = Col('Confrimed Status')
+    username = Col('Username', column_html_attrs={'class': 'username'})
+    email = Col('Email', column_html_attrs={'class': 'email'})
+    role_id = Col('Role', column_html_attrs={'class': 'role'})
+    confirmed = Col('Confrimed Status', column_html_attrs={'class': 'confirmed'})
 
 
 class AdminUserItem(object):

app/templates/main/admin.html.j2

@@ -5,8 +5,24 @@
   <div class="card large">
     <div class="card-content">
       <span class="card-title">User list</span>
+      <div id="users">
+        <div class="input-field">
+          <i class="material-icons prefix">search</i>
+          <input id="search-corpus" class="search" type="text"></input>
+          <label for="search-corpus">Search users</label>
+        </div>
         {{ table }}
+        <ul class="pagination"></ul>
       </div>
     </div>
   </div>
+</div>
+<script type="text/javascript">
+var options = {
+  valueNames: ['username', 'email', 'role', 'confirmed'],
+  page: 3,
+  pagination: true
+};
+var userList = new List('users', options);
+</script>
 {% endblock %}