Index: lams_tool_laqa/web/learning/RevisitedLearnerRep.jsp
===================================================================
diff -u -r099554309e1f77769667c041fb6d0fa91a89ea03 -rd1d8f658b5b65ceb887ecb17d1883a17a5d5a1e3
--- lams_tool_laqa/web/learning/RevisitedLearnerRep.jsp	(.../RevisitedLearnerRep.jsp)	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
+++ lams_tool_laqa/web/learning/RevisitedLearnerRep.jsp	(.../RevisitedLearnerRep.jsp)	(revision d1d8f658b5b65ceb887ecb17d1883a17a5d5a1e3)
@@ -18,6 +18,7 @@
 	<link rel="stylesheet" href="${lams}css/jquery.jRating.css" />
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme-blue.css">
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager.css">
+	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap.css">
 	<link rel="stylesheet" href="<html:rewrite page='/includes/qalearning.css'/>">
 	<lams:css />
 
@@ -35,14 +36,16 @@
 		COMMENT_TEXTAREA_TIP_LABEL = '<fmt:message key="label.comment.textarea.tip"/>',
 		WARN_COMMENTS_IS_BLANK_LABEL = '<fmt:message key="warning.comment.blank"/>',
 		WARN_MIN_NUMBER_WORDS_LABEL = "<fmt:message key="warning.minimum.number.words"><fmt:param value="${sessionMap.commentsMinWordsLimit}"/></fmt:message>";
-	</script>
+	</script>	
 	<script src="${lams}includes/javascript/jquery.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/jquery.jRating.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/jquery.tablesorter.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/jquery.tablesorter-pager.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/jquery.timeago.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/common.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/rating.js" type="text/javascript"></script>
+	<script src="${lams}includes/javascript/jquery.tablesorter-widgets.js" type="text/javascript"></script>
+	
 	<script type="text/javascript">
 	
 		var AVG_RATING_LABEL = '<fmt:message key="label.average.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param></fmt:message>',
@@ -54,9 +57,10 @@
 	  		jQuery("time.timeago").timeago();
 	  		
 			$(".tablesorter").tablesorter({
-				theme: 'blue',
+				theme: 'bootstrap',
+				headerTemplate : '{content} {icon}',
 			    widthFixed: true,
-			    widgets: ['zebra'],
+			    widgets: ['uitheme','zebra'],
 		        headers: { 
 		            2: {
 		                sorter: false 
@@ -66,17 +70,8 @@
 			
 			$(".tablesorter").each(function() {
 				$(this).tablesorterPager({	
-					// set to false otherwise it remembers setting from other jsFiddle demos
 					savePages: false,
-				      // use this format: "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
-				      // where {page} is replaced by the page number (or use {page+1} to get a one-based index),
-				      // {size} is replaced by the number of records to show,
-				      // {sortList:col} adds the sortList to the url into a "col" array, and {filterList:fcol} adds
-				      // the filterList to the url into an "fcol" array.
-				      // So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
-				      // and a filterList = [[2,Blue],[3,13]] becomes "&fcol[2]=Blue&fcol[3]=13" in the url
 					ajaxUrl : "<c:url value='/learning.do'/>?method=getResponses&page={page}&size={size}&{sortList:column}&isAllowRateAnswers=${qaContent.allowRateAnswers}&qaContentId=${qaContent.qaContentId}&qaSessionId=" + $("#toolSessionID").val() + "&questionUid=" + $(this).attr('data-question-uid') + "&userId=" + $("#userID").val() + "&reqID=" + (new Date()).getTime(),
-
 					ajaxProcessing: function (data) {
 				    	if (data && data.hasOwnProperty('rows')) {
 				    		var rows = [],
@@ -96,8 +91,11 @@
 									rows += 	'<div class="user">';
 									rows += 		userData["userName"];
 									rows += 	'</div> - ';
-									rows += 	userData["attemptTime"];
-									rows += '</div>';
+									rows += '<time class="timeago" title="';
+									rows += userData["attemptTime"];
+									rows += '" datetime="';
+									rows += 	userData["timeAgo"];
+									rows += '"></time></div>';
 								}
 								
 								rows += 	'<div class="user-answer">';
@@ -217,23 +215,17 @@
 				            
 				    	}
 					},
-				    container: $(this).next(".pager"),
+				    container: $(this).find(".ts-pager"),
 				    output: '{startRow} to {endRow} ({totalRows})',
-				    // css class names of pager arrows
-				    cssNext: '.tablesorter-next', // next page arrow
-					cssPrev: '.tablesorter-prev', // previous page arrow
-					cssFirst: '.tablesorter-first', // go to first page arrow
-					cssLast: '.tablesorter-last', // go to last page arrow
-					cssGoto: '.gotoPage', // select dropdown to allow choosing a page
-					cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
-					cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
-					// class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
-					cssDisabled: 'disabled' // Note there is no period "." in front of this class name
+				  	cssPageDisplay: '.pagedisplay',
+						cssPageSize: '.pagesize',
+						cssDisabled: 'disabled'
 				})
 				
 				// bind to pager events
 				.bind('pagerInitialized pagerComplete', function(event, options){
 					initializeJRating();
+					jQuery("time.timeago").timeago();
 				});
 			});
 		 });	
@@ -341,7 +333,7 @@
 											</div>
 											-
 											<time class="timeago"
-												datetime="<fmt:formatDate value='${userResponse.attemptTime}' pattern="yyyy-MM-dd'T'HH:mm:ss.S'Z'"/>">
+												datetime="<fmt:formatDate value='${userResponse.attemptTime}' pattern="yyyy-MM-dd'T'HH:mm:ss.S"/>">
 												<lams:Date value="${userResponse.attemptTime}" />
 											</time>
 										</div>
@@ -404,7 +396,7 @@
 					</div>
 				</c:if>
 
-				<table class="tablesorter" data-question-uid="${question.uid}">
+				<lams:TSTable numColumns="1" dataId='data-question-uid="${question.uid}"'> 
 					<thead>
 						<tr>
 							<th title="<fmt:message key='label.sort.by.answer'/>"><fmt:message key="label.learning.answer" /></th>
@@ -418,24 +410,8 @@
 					</thead>
 					<tbody>
 					</tbody>
-				</table>
+				</lams:TSTable>
 
-				<!-- pager -->
-				<div class="pager">
-					<form>
-						<img class="tablesorter-first" /> <img class="tablesorter-prev" /> <span class="pagedisplay"></span>
-						<!-- this can be any element, including an input -->
-						<img class="tablesorter-next" /> <img class="tablesorter-last" /> <select class="pagesize">
-							<option selected="selected" value="10">10</option>
-							<option value="20">20</option>
-							<option value="30">30</option>
-							<option value="40">40</option>
-							<option value="50">50</option>
-							<option value="100">100</option>
-						</select>
-					</form>
-				</div>
-
 			</c:forEach>
 		</c:if>