Index: lams_admin/web/organisation/parts/selectStaff.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_admin/web/organisation/parts/selectStaff.jsp,v
diff -u -r1.3 -r1.3.2.1
--- lams_admin/web/organisation/parts/selectStaff.jsp	1 Nov 2010 23:06:08 -0000	1.3
+++ lams_admin/web/organisation/parts/selectStaff.jsp	16 Jun 2016 03:10:21 -0000	1.3.2.1
@@ -1,36 +1,43 @@
 <%@ include file="/taglibs.jsp"%>
 
+<link type="text/css" href="${lams}css/jquery.tablesorter.theme.bootstrap.css" rel="stylesheet">
+<link type="text/css" href="${lams}css/jquery.tablesorter.pager.css"  rel="stylesheet">
+
 <script>
-	<!--
-	jQuery(document).ready(function() {
-		//big workaround in order to bind Lams event
-		$.tablesorter.addWidget({
-			id: "checkallCheckbox2",
-			// format is called when the on init and when a sorting has finished
-			format: function(table) {
-				var hasCheckedItems = false;
-				jQuery("input[id=staff]").each(function(index) {
-					hasCheckedItems = hasCheckedItems || $(this).attr('checked');
-				 });
-				jQuery("#checkAllStaff").attr('checked', hasCheckedItems);
-			}
-		});
-		
-		jQuery("#staffTable").tablesorter({
+	$(document).ready(function() {
+		$(".tablesorter").tablesorter({
 			widthFixed:true,
+			theme: 'bootstrap',
+			headerTemplate : '{content} {icon}',
 			sortList:[[1,0]],
 			headers: { 0: { sorter: false}},
 			textExtraction:'complex',
-			widgets: ['checkallCheckbox2']			
-		}).tablesorterPager({
-			positionFixed: false,
-			container: jQuery("#pager")
+			widgets: ['uitheme','checkallCheckbox2']		
 		});
+		
+		//sort table only in case there is a data inside (it's a tablesorter bug)
+		if ($(".tablesorter tbody tr").length > 0) {
+			$(".tablesorter").tablesorterPager({
+				container: jQuery(".ts-pager"),
+	            output: '{startRow} to {endRow} ({totalRows})'
+			});
+			$(".tablesorter").trigger("sorton", [[[0, 0]]]);
+		}
+		
+		updateAllStaff();
 	});
-
+	
+	function updateAllStaff() {
+		var allCheckedItems = true;
+		$("input[id=staff]").each(function(index) {
+			allCheckedItems = allCheckedItems && $(this).prop('checked');
+		 });
+		$("#checkAllStaff").prop('checked', allCheckedItems);
+	}
+	
 	function checkAllStaff () {
-		var isChecked = jQuery("#checkAllStaff").attr('checked');
-		jQuery("input[name=staff]").attr('checked', isChecked);
+		var isChecked = $("#checkAllStaff").prop('checked');
+		$("input[name=staff]").prop('checked', isChecked);
 	}
 	//-->
 </script>
@@ -42,50 +49,55 @@
 <c:if test="${not empty monitors}">
 	<p><fmt:message key="message.check.to.add.monitor" /></p>
 
-	<table id="staffTable" class="alternative-color tablesorter-admin">
-		<thead>
+<table id="staffTable" class="tablesorter">
+	<thead>
+		<tr>
+			<th><input type='checkbox' id='checkAllStaff' onclick='checkAllStaff();' ></th>
+			<th><fmt:message key="admin.user.login" /></th>
+			<th><fmt:message key="admin.user.name" /></th>
+			<th><fmt:message key="admin.user.email" /></th>
+		</tr>
+	</thead>
+	<tbody>
+		<c:forEach items="${monitors}" var="user">
 			<tr>
-				<th><input type='checkbox' id='checkAllStaff' onclick='checkAllStaff();' ></th>
-				<th><fmt:message key="admin.user.login" /></th>
-				<th><fmt:message key="admin.user.name" /></th>
-				<th><fmt:message key="admin.user.email" /></th>
+				<td>
+					<input id="staff" name="staff" type="checkbox" value="<c:out value="${user.userId}" />" checked="checked" onclick='updateAllStaff();'/>
+				</td>
+				<td>
+					<c:out value="${user.login}" />
+				</td>
+				<td>
+					<c:out value="${user.title}" />&nbsp;<c:out value="${user.firstName}" />&nbsp;<c:out value="${user.lastName}" />
+				</td>
+				<td>
+					<c:out value="${user.email}" />
+				</td>
 			</tr>
-		</thead>
-		<tbody>
-			<c:forEach items="${monitors}" var="user">
-				<tr>
-					<td>
-						<input id="staff" name="staff" type="checkbox" value="<c:out value="${user.userId}" />" checked="checked" />
-					</td>
-					<td>
-						<c:out value="${user.login}" />
-					</td>
-					<td>
-						<c:out value="${user.title}" /> <c:out value="${user.firstName}" /> <c:out value="${user.lastName}" />
-					</td>
-					<td>
-						<c:out value="${user.email}" />
-					</td>
-				</tr>
-			</c:forEach>
-		</tbody>
-	</table>
-	
-	<div id="pager">
-		<form onsubmit="return false;">
-			<img src="<lams:LAMSURL/>/images/first.png" class="first"/>
-			<img src="<lams:LAMSURL/>/images/prev.png" class="prev">
-			<input type="text" class="pagedisplay"/>
-			<img src="<lams:LAMSURL/>/images/next.png" class="next">
-			<img src="<lams:LAMSURL/>/images/last.png" class="last">
-			<select class="pagesize">
-				<option selected="selected" value="10">10&nbsp;&nbsp;</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>
+	</tbody>
+	<tfoot>
+		<tr>
+	    	<th colspan="4" class="ts-pager form-horizontal">
+	    	<form onsubmit="return false;">	    	
+		        <button type="button" class="btn btn-xs first"><i class="fa fa-step-backward"></i></button>
+		        <button type="button" class="btn btn-xs 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 btn-xs next"><i class="fa fa-forward"></i></button>
+		        <button type="button" class="btn btn-xs last"><i class="fa fa-step-forward"></i></button>
+		        <select class="pagesize" title="Select page size">
+		      		<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>
+	        </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table> 	
 </c:if>
\ No newline at end of file