Index: lams_tool_laqa/src/java/org/lamsfoundation/lams/tool/qa/web/QaLearningAction.java
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -rd1d8f658b5b65ceb887ecb17d1883a17a5d5a1e3
--- lams_tool_laqa/src/java/org/lamsfoundation/lams/tool/qa/web/QaLearningAction.java	(.../QaLearningAction.java)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_laqa/src/java/org/lamsfoundation/lams/tool/qa/web/QaLearningAction.java	(.../QaLearningAction.java)	(revision d1d8f658b5b65ceb887ecb17d1883a17a5d5a1e3)
@@ -1095,11 +1095,11 @@
 	    responcedata.put(AttributeNames.ATTR_COUNT_RATED_ITEMS, countRatedQuestions);
 	}
 
-	DateFormat dateFormatter = new SimpleDateFormat("d MMMM yyyy h:mm:ss a");
+	DateFormat dateFormatter = new SimpleDateFormat(DateUtil.PRETTY_FORMAT);
+	// setting date format to ISO8601 for jquery.timeago
+	DateFormat dateFormatterTimeAgo = new SimpleDateFormat(DateUtil.ISO8601_FORMAT); 
 	for (QaUsrResp response : responses) {
 	    QaQueUsr user = response.getQaQueUser();
-	    //JSONArray cell=new JSONArray();
-	    //cell.put(StringEscapeUtils.escapeHtml(user.getFirstName()) + " " + StringEscapeUtils.escapeHtml(user.getLastName()) + " [" + StringEscapeUtils.escapeHtml(user.getLogin()) + "]");
 
 	    JSONObject responseRow = new JSONObject();
 	    responseRow.put("responseUid", response.getResponseId().toString());
@@ -1111,6 +1111,7 @@
 	    Date attemptTime = response.getAttemptTime();
 	    attemptTime = DateUtil.convertToTimeZoneFromDefault(userTimeZone, attemptTime);
 	    responseRow.put("attemptTime", dateFormatter.format(attemptTime));
+	    responseRow.put("timeAgo", dateFormatterTimeAgo.format(attemptTime));
 
 	    if (isAllowRateAnswers) {
 
Index: lams_tool_laqa/web/WEB-INF/tags/TSTable.tag
===================================================================
diff -u
--- lams_tool_laqa/web/WEB-INF/tags/TSTable.tag	(revision 0)
+++ lams_tool_laqa/web/WEB-INF/tags/TSTable.tag	(revision d1d8f658b5b65ceb887ecb17d1883a17a5d5a1e3)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} form-horizontal">
+	        <button type="button" class="btn first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize input-mini" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<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>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_laqa/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -rd1d8f658b5b65ceb887ecb17d1883a17a5d5a1e3
--- lams_tool_laqa/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_laqa/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d1d8f658b5b65ceb887ecb17d1883a17a5d5a1e3)
@@ -440,6 +440,10 @@
 		<path>/WEB-INF/tags/DefineLater.tag</path>
    	</tag-file>  
    	<tag-file>
+	    <name>TSTable</name>
+		<path>/WEB-INF/tags/TSTable.tag</path>
+   	</tag-file>  
+   	<tag-file>
 	    <name>Alert</name>
 		<path>/WEB-INF/tags/Alert.tag</path>
    	</tag-file>  
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>