Implemented todolist javascript sorting

2 files changed, 80 insertions, 42 deletions

diff --git a/templates/todolists/list.html b/templates/todolists/list.html
index 980328a..6edf132 100644
--- a/templates/todolists/list.html
+++ b/templates/todolists/list.html
@@ -9,22 +9,26 @@
 	{% endif %}
 		<h2 class="title">Package ToDo lists</h2>
 		<table class="results" width="100%">
-			<tr>
-				<th>Name</th>
-				<th>Creation Date</th>
-				<th>Creator</th>
-				<th>Description</th>
-				<th>Status</th>
-			</tr>
-		{% for list in lists %}
-            <tr class="{% cycle pkgr2,pkgr1 %}">
-				<td style="white-space:nowrap"><a href="/todo/{{ list.id }}/">{{ list.name }}</a></td>
-				<td>{{ list.date_added }}</td>
-				<td>{{ list.creator.get_full_name }}</td>
-				<td>{{ list.description }}</td>
-				<td>{% if list.complete %}<span style="color:blue">Complete</span>{% else %}<span style="color:red">Incomplete</span>{% endif %}</td>
-			</tr>
-		{% endfor %}
+            <thead>
+		    	<tr>
+                    <th>Name</th>
+                    <th>Creation Date</th>
+                    <th>Creator</th>
+                    <th>Description</th>
+                    <th>Status</th>
+                </tr>
+            </thead>
+            <tbody>
+            {% for list in lists %}
+                <tr class="{% cycle pkgr2,pkgr1 %}">
+                    <td style="white-space:nowrap"><a href="/todo/{{ list.id }}/">{{ list.name }}</a></td>
+                    <td>{{ list.date_added }}</td>
+                    <td>{{ list.creator.get_full_name }}</td>
+                    <td>{{ list.description }}</td>
+                    <td>{% if list.complete %}<span style="color:blue">Complete</span>{% else %}<span style="color:red">Incomplete</span>{% endif %}</td>
+                </tr>
+            {% endfor %}
+            </tbody>
 		</table>
 	</div>
 {% endblock %}
diff --git a/templates/todolists/view.html b/templates/todolists/view.html
index b77e6e7..8fe6014 100644
--- a/templates/todolists/view.html
+++ b/templates/todolists/view.html
@@ -1,33 +1,67 @@
 {% extends "base.html" %}
-
+{% block head %}
+<script type="text/javascript" src="/media/jquery-1.2.3.min.js"></script>
+<script type="text/javascript" src="/media/jquery.tablesorter.min.js"></script>
+<script type="text/javascript">
+    $(document).ready(
+        function(){
+            $("#todotable").tablesorter({widgets: ['zebra']});
+        }
+    );
+</script>
+<style type="text/css">
+    table#todotable thead tr .header {
+        background-image: url('/media/bg.gif');
+        background-repeat: no-repeat;
+        background-position: center right;
+        cursor: pointer;
+    }
+    table#todotable thead tr .headerSortUp {
+        background-image: url('/media/asc.gif');
+    }
+    table#todotable thead tr .headerSortDown {
+        background-image: url('/media/desc.gif');
+    }
+    table#todotable thead tr .headerSortDown, table.todotable thead tr .headerSortUp {
+        background-color: #8dbdd8;
+    }
+    table#todotable tbody tr.odd {
+        background-color: #eee4cb;
+    }
+</style>
+{% endblock %}
 {% block content %}
 	<div class="greybox">
 		<h3 class="title">ToDo List: {{ list.name }}</h2>
-		<table class="results" width="100%">
-			<tr>
-				<th>ID</th>
-				<th>Arch</th>
-				<th>Repo</th>
-				<th>Name</th>
-				<th>Maintainer</th>
-				<th>Status</th>
-			</tr>
-		{% for pkg in pkgs %}
-            <tr class="{% cycle pkgr1,pkgr2 %}">
-				<td><a href="/packages/{{ pkg.pkg.id }}/">{{ pkg.pkg.id }}</a></td>
-				<td>{{ pkg.pkg.arch.name  }}</td>
-				<td>{{ pkg.pkg.repo.name  }}</td>
-				<td>{{ pkg.pkg.pkgname  }}</td>
-				<td>{{ pkg.pkg.maintainer.get_full_name  }}</td>
-				<td>
-				{% if pkg.complete %}
-					<a href="/todo/flag/{{ list.id }}/{{ pkg.id }}/"><span style="color:blue">Complete</span></a>
-				{% else %}
-					<a href="/todo/flag/{{ list.id }}/{{ pkg.id }}/"><span style="color:red">Incomplete</span></a>
-				{% endif %}
-				</td>
-			</tr>
-		{% endfor %}
+		<table id="todotable" class="results" width="100%">
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Arch</th>
+                    <th>Repo</th>
+                    <th>Name</th>
+                    <th>Maintainer</th>
+                    <th>Status</th>
+                </tr>
+            </thead>
+            <tbody>
+            {% for pkg in pkgs %}
+                <tr class="{% cycle even,odd %}">
+                    <td><a href="/packages/{{ pkg.pkg.id }}/">{{ pkg.pkg.id }}</a></td>
+                    <td>{{ pkg.pkg.arch.name  }}</td>
+                    <td>{{ pkg.pkg.repo.name  }}</td>
+                    <td>{{ pkg.pkg.pkgname  }}</td>
+                    <td>{{ pkg.pkg.maintainer.get_full_name  }}</td>
+                    <td>
+                    {% if pkg.complete %}
+                        <a href="/todo/flag/{{ list.id }}/{{ pkg.id }}/"><span style="color:blue">Complete</span></a>
+                    {% else %}
+                        <a href="/todo/flag/{{ list.id }}/{{ pkg.id }}/"><span style="color:red">Incomplete</span></a>
+                    {% endif %}
+                    </td>
+                </tr>
+            {% endfor %}
+            </tbody>
 		</table>
 	</div>
 {% endblock %}