Index: lams_tool_spreadsheet/web/pages/monitoring/summary.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_spreadsheet/web/pages/monitoring/summary.jsp,v
diff -u -r1.9 -r1.10
--- lams_tool_spreadsheet/web/pages/monitoring/summary.jsp	9 Oct 2014 14:52:00 -0000	1.9
+++ lams_tool_spreadsheet/web/pages/monitoring/summary.jsp	18 Nov 2015 23:10:46 -0000	1.10
@@ -29,6 +29,14 @@
 		showMessage(url);
 	}
 	
+	function updateMarkAfterSaving(userUid, mark) {
+		var span = document.getElementById('mark'+userUid);
+		while( span.firstChild ) {
+		    span.removeChild( span.firstChild );
+		}
+		span.appendChild( document.createTextNode(mark) );
+	}
+	
 	function downloadMarks(sessionId){
 		var url = "<c:url value="/monitoring/downloadMarks.do"/>";
 	    var reqIDVar = new Date();
Fisheye: Tag 1.4 refers to a dead (removed) revision in file `lams_tool_spreadsheet/web/pages/monitoring/parts/notebook.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_spreadsheet/web/pages/monitoring/parts/summarylist.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_spreadsheet/web/pages/monitoring/parts/summarylist.jsp,v
diff -u -r1.8 -r1.9
--- lams_tool_spreadsheet/web/pages/monitoring/parts/summarylist.jsp	24 Apr 2015 09:45:43 -0000	1.8
+++ lams_tool_spreadsheet/web/pages/monitoring/parts/summarylist.jsp	18 Nov 2015 23:10:46 -0000	1.9
@@ -1,4 +1,116 @@
 <%@ include file="/common/taglibs.jsp"%>
+
+<c:set var="lams"><lams:LAMSURL /></c:set>
+
+<div id="summaryList2">
+
+<link type="text/css" href="${lams}css/jquery.tablesorter.theme-blue.css" rel="stylesheet">
+<link type="text/css" href="${lams}css/jquery.tablesorter.pager.css" rel="stylesheet">
+
+<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-widgets.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.js"></script>
+
+<script type="text/javascript">
+	// use noConflict() otherwise jQuery conflicts with prototype.js
+	jQuery.noConflict();
+	jQuery(document).ready(function($){
+	    
+		$(".tablesorter").tablesorter({
+			theme: 'blue',
+		    sortInitialOrder: 'desc',
+            sortList: [[0]],
+            widgets: [ "resizable", "filter" ],
+            <c:choose>
+			<c:when test="${spreadsheet.markingEnabled}">
+            headers: { 1: { filter: false}, 2: { sorter: false, filter: false} }, 
+            </c:when>
+			<c:otherwise>
+            headers: { 1: { sorter: false, filter: false} }, 
+            </c:otherwise>
+            </c:choose>
+            widgetOptions: {
+            	resizable: true,
+            	// include column filters 
+                filter_columnFilters: true, 
+                filter_placeholder: { search : '<fmt:message key="label.search"/>' }, 
+                filter_searchDelay: 700 
+            }
+		});
+		
+		$(".tablesorter").each(function() {
+			$(this).tablesorterPager({
+				savePages: false,
+				ajaxUrl : "<c:url value='/monitoring/getUsers.do'/>?sessionMapID=${sessionMapID}&toolContentID=${param.toolContentID}&page={page}&size={size}&{sortList:column}&{filterList:fcol}&toolSessionID=" + $(this).attr('data-session-id'),
+				ajaxProcessing: function (data, table) {
+					if (data && data.hasOwnProperty('rows')) {
+			    		var rows = [],
+			            json = {};
+			    		
+						for (i = 0; i < data.rows.length; i++){
+							var userData = data.rows[i];
+
+							rows += '<tr>';
+							rows += '<td>';
+							if ( ${spreadsheet.learnerAllowedToSave} ) {
+								var reviewURL = '<c:url value="/reviewItem.do"/>?userUid='+userData["userUid"];
+								rows += '<a href="javascript:launchPopup(\'' + reviewURL + '\')" style="margin-left: 7px;" styleClass="button">' + userData["userName"] + '</a>';
+							} else {
+								rows += userData["userName"];
+							}
+							rows += '</td>';
+
+							<c:if test="${spreadsheet.markingEnabled}">
+							rows += '<td align="right"><span id="mark'+userData["userUid"]+'">'; 
+							if ( userData["userModifiedSpreadsheet"] && userData["mark"] ) {
+								rows += userData["mark"];
+							} else {
+								rows += '-';
+							}
+							rows += '</span>';
+							if ( userData["userModifiedSpreadsheet"] ) {
+								rows += '<a href="javascript:editMark(\''+userData["userUid"]+'\')" style="margin-left: 7px;"><fmt:message key="label.monitoring.summary.mark.button" /></a>';
+							}
+							rows += '</td>';
+							</c:if>
+							
+							<c:if test="${spreadsheet.reflectOnActivity}">
+							rows += '<td>';
+							if ( userData["reflection"] ) {
+								rows += userData["reflection"];
+							} else {
+								rows += '-';
+							}
+							rows += '</td>';
+							</c:if>
+							
+							rows += '</tr>';
+						}
+			            
+						json.total = data.total_rows;
+						json.rows = $(rows);
+						return json;
+			            
+			    	}
+				},					
+			    container: $(this).next(".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
+			})
+		});
+  	})
+</script>
+
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="summaryList" value="${sessionMap.summaryList}"/>
 <c:set var="spreadsheet" value="${sessionMap.spreadsheet}"/>
@@ -9,8 +121,7 @@
 	</div>
 </c:if>
 
-<div id="summaryList2">
-	<c:forEach var="summary" items="${summaryList}" varStatus="firstGroup">
+	<c:forEach var="summary" items="${summaryList}">
 		<c:if test="${sessionMap.isGroupedActivity}">
 			<h1>
 				<fmt:message key="monitoring.label.group" /> ${summary.sessionName}	
@@ -19,82 +130,52 @@
 		
 		<h2 style="color:black; margin-left: 20px;"><fmt:message key="label.monitoring.summary.overall.summary" />	</h2>
 		
-		<table cellpadding="0" class="alternative-color" >
-			<tr>
-				<th width="60%" align="left">
-					<fmt:message key="label.monitoring.summary.learner" />
-				</th>
-				<c:if test="${spreadsheet.markingEnabled}">			
-					<th width="40px" align="center">
-						<fmt:message key="label.monitoring.summary.marked" />
-					</th>
-					<th width="20px" align="left">
-					</th>
-				</c:if>
-			</tr>
-	
-			<c:forEach var="user" items="${summary.users}" varStatus="userStatus">
+		<div class="tablesorter-holder">
+		<table class="tablesorter" data-session-id="${summary.sessionId}">
+			<thead>
 				<tr>
-					<td>
-						<c:choose>
-							<c:when test="${spreadsheet.learnerAllowedToSave}">
-								<c:set var="reviewItem">
-									<c:url value="/reviewItem.do?userUid=${user.uid}"/>
-								</c:set>
-								<html:link href="javascript:launchPopup('${reviewItem}')">
-									${user.loginName}
-								</html:link>
-							</c:when>
-							<c:otherwise>
-								${user.loginName}
-							</c:otherwise>
-						</c:choose>					
-					</td>
-					
-					<c:if test="${spreadsheet.markingEnabled}">					
-						<td align="center">
-							<c:choose>
-								<c:when test="${(user.userModifiedSpreadsheet != null) && (user.userModifiedSpreadsheet.mark != null)}">
-									<img src="<lams:LAMSURL/>/images/tick.gif" alt="tick" border="0"/>
-								</c:when>
-									
-								<c:otherwise>
-									<img src="<lams:LAMSURL/>/images/cross.gif" alt="cross" border="0"/>
-								</c:otherwise>
-							</c:choose>
-						</td>
-						
-						
-						
-						
-							<c:choose>
-								<c:when test="${user.userModifiedSpreadsheet != null}">
-									<td align="left">								
-										<html:link
-											href="javascript:editMark(${user.uid});"
-											property="Mark" styleClass="button" >
-											<fmt:message key="label.monitoring.summary.mark.button" />
-										</html:link>
-									</td>										
-								</c:when>
-									
-								<c:otherwise>
-									<td align="center">
-										<fmt:message key="label.monitoring.summary.mark.button" />
-									</td>
-								</c:otherwise>
-							</c:choose>						
-						
-						
-
-
-					</c:if>				
+					<th align="left">
+						<fmt:message key="label.monitoring.summary.learner" />
+					</th>
+					<c:if test="${spreadsheet.markingEnabled}">			
+						<th width="60px" align="center">
+							<fmt:message key="label.monitoring.summary.marked" />
+						</th>
+					</c:if>
+					<c:if test="${spreadsheet.reflectOnActivity}">			
+						<th width="50%" align="center">
+							<fmt:message key="label.monitoring.summary.reflection" />
+						</th>
+					</c:if>
 				</tr>
-			</c:forEach>
-			
+			</thead>
+			<tbody>
+			</tbody>
 		</table>
+		
+		<!-- 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>
+		</div>
+	
+		
 		<c:if test="${spreadsheet.markingEnabled}">	
-			<div style="position:relative; left:30px; ">
+			<div class="space-bottom-top" style="position:relative; left:30px; ">
 				<html:link href="javascript:viewAllMarks(${summary.sessionId});"
 					property="viewAllMarks" styleClass="button">
 					<fmt:message key="label.monitoring.summary.viewAllMarks.button" />
@@ -109,62 +190,5 @@
 				</html:link>
 			</div>
 		</c:if>
-		
-		<%-- Reflection list  --%>
-		
-		<c:if test="${sessionMap.spreadsheet.reflectOnActivity}">
-		
-			<h2 style="color:black; margin-left: 20px; " ><fmt:message key="label.monitoring.summary.title.reflection"/>	</h2>
-			<table cellpadding="0"  class="alternative-color"  >
-	
-				<tr>
-					<th>
-						<fmt:message key="label.monitoring.summary.user"/>
-					</th>
-					<th>
-						<fmt:message key="label.monitoring.summary.reflection"/>
-					</th>
-				</tr>				
-							
-				<c:forEach var="user" items="${summary.users}">
-					<tr>
-						<td>
-							${user.loginName}
-						</td>
-						<td >
-							<c:set var="viewReflection">
-								<c:url value="/monitoring/viewReflection.do?userUid=${user.uid}"/>
-							</c:set>
-							<html:link href="javascript:launchPopup('${viewReflection}')">
-								<fmt:message key="label.view" />
-							</html:link>
-						</td>
-					</tr>
-				</c:forEach>
-							
-			</table>
-		</c:if>
-		<br>
-		
-		
-	</c:forEach>
-</div>
-
-<%-- This script will works when a new resoruce Condition submit in order to refresh "TaskList List" panel. --%>
-<script type="text/javascript">
-	var win = null;
-	try {
-		if (window.parent && window.parent.hideMessage) {
-			win = window.parent;
-		} else if (window.top && window.top.hideMessage) {
-			win = window.top;
-		}
-	} catch(err) {
-		// mute cross-domain iframe access errors
-	}
-	if (win) {
-		win.hideMessage();
-		var obj = win.document.getElementById('summariesArea');
-		obj.innerHTML= document.getElementById("summaryList2").innerHTML;
-	}
-</script>
+	</c:forEach>		
+</div>
\ No newline at end of file
Index: lams_tool_spreadsheet/web/pages/monitoring/parts/updatemarkaftersave.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_spreadsheet/web/pages/monitoring/parts/updatemarkaftersave.jsp,v
diff -u
--- /dev/null	1 Jan 1970 00:00:00 -0000
+++ lams_tool_spreadsheet/web/pages/monitoring/parts/updatemarkaftersave.jsp	18 Nov 2015 23:10:46 -0000	1.1
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<%@ include file="/common/taglibs.jsp"%>
+
+<lams:html>
+	<lams:head>
+		<%@ include file="/common/header.jsp"%>	
+		<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.js"></script>
+	</lams:head>
+	<body>
+		<script type="text/javascript"> 
+			if (window.parent && window.parent.hideMessage) {
+				window.parent.hideMessage();
+			} else if (window.top && window.top.hideMessage) {
+				window.top.hideMessage();
+			}
+			if (window.parent && window.parent.updateMarkAfterSaving) {
+				window.parent.updateMarkAfterSaving(${userUid}, ${mark});
+			} else if (window.top && window.top.updateMarkAfterSaving) {
+				window.top.updateMarkAfterSaving(${userUid}, ${mark});
+			}
+		</script>
+		<p>Mark Updated to ${mark}</p>
+	</body>
+</lams:html>