Added tablesorter and closed #34.

app/index.html

@@ -158,6 +158,11 @@ <h3>Forever is linked to your personal cloud</h3>
       <div id="view-friends" class="view row-fluid" style="display:none;">
         <div class="span12" style="margin-bottom:12px;">
 					<table class="table table-bordered table-hover">
+						<thead>
+							<tr>
+								<th class="sorter-lastname">Name</th>
+							</tr>
+						</thead>
 						<tbody id="table-friends">
 						</tbody>
 					</table>
@@ -410,8 +415,12 @@ <h4 class="media-heading" id="friend-phone"></h4>
 		<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
 		<script src="js/page.js"></script>
 		<script src="js/bootstrap-filestyle.js"></script>
+		<script type="text/javascript" src="/libs/tablesorter/js/jquery.tablesorter.js"></script>
 		<script src="js/CloudOS.js"></script>
 		<script src="js/forever.js"></script>
 
+    <!-- choose a theme file -->
+    <link rel="stylesheet" href="/libs/tablesorter/css/theme.default.css">
+    <!-- load jQuery and tablesorter scripts -->
   </body>
 </html>

app/js/forever.js

@@ -8,7 +8,28 @@ $(document).ready(function() {
 	// --------------------------------------------
 	// Click handler for Add Link on Homepage
 	$('#navAddLink').click(function() {
-			$('#modalAddLink').modal();
+		$('#modalAddLink').modal();
+	});
+
+	// add parser through the tablesorter addParser method
+	$.tablesorter.addParser({
+		// set a unique id
+		id: 'lastname',
+		is: function(s, table, cell) {
+			// return false so this parser is not auto detected
+			return true;
+		},
+		format: function(s, table, cell, cellIndex) {
+			var matches = s.toLowerCase().match(/([a-z,.'-]+)$/i); // Get the last name
+			console.log(matches);
+			if(typeof(matches) === "object" && matches != null && matches.length > 0){
+				return matches[0];
+			} else {
+				return "zzzzzzzzzzz"; // Make the no-names last.
+			}
+		},
+		// set type, either numeric or text
+		type: 'text'
 	});
 
 	page('/', view_home);
@@ -593,14 +614,20 @@ $(document).ready(function() {
 							}
 							var newRow = '<tr data-token="' + dtoken + '"><td>' +
 									fname +
-								  '<i class="icon-chevron-right pull-right"></i>' +
+									'<i class="icon-chevron-right pull-right"></i>' +
 									'</td></tr>';
 							$('#table-friends').prepend(newRow);
 					}
 				});
+
 				show_view('friends');
-				$('#modalSpinner').hide();
 				currentView = 'friends';
+
+				$("#view-friends table").tablesorter({
+					sortList: [[0,0]] // Sort by name ascendingly
+				});
+
+				$('#modalSpinner').hide();
 			}
 		);
 	}

app/libs/tablesorter/addons/pager/jquery.tablesorter.pager.css

@@ -0,0 +1,42 @@
+/* pager wrapper, div */
+.tablesorter-pager {
+	padding: 5px;
+}
+/* pager wrapper, in thead/tfoot */
+td.tablesorter-pager {
+	background-color: #e6eeee;
+	margin: 0; /* needed for bootstrap .pager gets a 18px bottom margin */
+}
+/* pager navigation arrows */
+.tablesorter-pager img {
+	vertical-align: middle;
+	margin-right: 2px;
+	cursor: pointer;
+}
+
+/* pager output text */
+.tablesorter-pager .pagedisplay {
+	padding: 0 5px 0 5px;
+	width: auto;
+	white-space: nowrap;
+	text-align: center;
+}
+
+/* pager element reset (needed for bootstrap) */
+.tablesorter-pager select {
+	margin: 0;
+	padding: 0;
+}
+
+/*** css used when "updateArrows" option is true ***/
+/* the pager itself gets a disabled class when the number of rows is less than the size */
+.tablesorter-pager.disabled {
+	display: none;
+}
+/* hide or fade out pager arrows when the first or last row is visible */
+.tablesorter-pager .disabled {
+	/* visibility: hidden */
+	opacity: 0.5;
+	filter: alpha(opacity=50);
+	cursor: default;
+}