Index: lams_central/web/includes/javascript/main.js
===================================================================
diff -u -r3c6cdee7feaf4d150800c775c8571fb61621f211 -r6e03312f31e3651711bc99047d26d9e51bac4933
--- lams_central/web/includes/javascript/main.js	(.../main.js)	(revision 3c6cdee7feaf4d150800c775c8571fb61621f211)
+++ lams_central/web/includes/javascript/main.js	(.../main.js)	(revision 6e03312f31e3651711bc99047d26d9e51bac4933)
@@ -150,7 +150,7 @@
 
 
 function loadOrganisation() {
-	$("#page-wrapper").finish().fadeOut(200, function() {
+	$("#org-container").finish().fadeOut(200, function() {
 		$(this).html('<div class="text-center m-5"><i class="fa fa-refresh fa-spin fa-2x fa-fw"></i>').show()
 		.load(
 			"displayGroup.do",
@@ -164,19 +164,190 @@
 					return;
 				}
 					
-				initDataTables();
-					
 				// if screen is smaller than 768px (i.e. offcanvas occupies 100%) and offcanvas is shown - then hide it on user selecting an organisation
 				if (window.matchMedia('(max-width: 768px)').matches && !$("body").hasClass("offcanvas-hidden")) {
 					//do it with a small delay so it will be understood that the new organisation is selected indeed
 					$("body").addClass('offcanvas-hidden', 300);
 				}
+				
+				//init DataTables
+			    $('.lessons-table').each(function(i, obj) {
+			    	var lessonsTable = $(this);
+				    
+			    	lessonsTable.DataTable({
+				    	select: false,
+				        info: false,
+				        paging: $("tbody tr", $(this)).length > 20,//hide pager if there is only one page
+				        pageLength: 20,
+				        language: {
+				            search: "_INPUT_",
+				            searchPlaceholder: "Search..."
+				        },
+				    	rowReorder: {
+				            selector: 'td.row-reorder'
+				        },
+			         	'dom':
+			            	"<'row'<'col-sm-12'<'float-right ml-2'B>f>>" +
+			            	"<'row'<'col-sm-12'tr>>" +
+			            	"<'row'<'col-sm-12 text-center'p>>",
+			         	'buttons': [
+				         {
+				            'text': '<select class="btn custom-select-sm" onchange="orderDatatable(this, \'' + lessonsTable.attr('id') + '\')">' +
+				            	 		' <option value="0" selected>Default order</option>' +
+				            	 		' <option value="1">Date</option>' +
+				            	 		' <option value="2">In progress</option>' +
+				            	 		' <option value="3">Completed</option>' +
+				            	 		(isFavouriteLessonEnabled ?
+				            	 			' <option value="4">Stared</option>':
+				            	 			''
+				            	 		) +
+				            		'</select>',
+				            'action': function (e, dt, node) {
+				            	//dt.table().order([1, 'asc']).draw(); 
+				            	//console.log("aaa" + e.type);
+				            	//$(dt.table().node()).data("table-id", dt.table().node().id);
+				            },
+				            'className': 'btn-sm btn-light mr-3',
+				            'attr': {
+				               'title': 'Change views',
+				            }
+				        }, 
+				        {
+			            'text': '<i class="fa fa-table fa-fw" aria-hidden="true"></i> <span class="card-view-label"><span class="d-none d-sm-inline">Card view</span></span><span class="list-view-label"><span class="d-none d-sm-inline">List view</span></span>',
+			            'action': function (e, dt, node) {
+				            var $table = $(dt.table().node());
+				            var isUserMonitor = eval(lessonsTable.data("is-user-monitor"))
+				            
+				        	//add "cards" class
+				        	var toggleClasses = isUserMonitor ? 'cards table-striped table-hover' : 'cards table-hover';
+			                $table.toggleClass(toggleClasses);
+			                //toggle button's icon
+			                $('.fa', node).toggleClass(['fa-table', 'fa-id-badge']);
+				            $('.list-view-label,.card-view-label', node).toggle();
+
+				            //toggle auxiliary buttons
+				            $(".auxiliary-links-menu", $table).toggle();
+
+				            //hide charts for smaller devices
+				            if (isUserMonitor) {
+					            $("td.chart-td", lessonsTable).toggleClass("d-none d-sm-table-cell");
+					        }
+
+			                dt.draw('page');
+			            },
+			            'className': 'btn-sm btn-light',
+			            'attr': {
+			               'title': 'Change views',
+			            }
+			         }],
+			         'columns': [
+			        	{"visible": false},
+			        	{"visible": false},
+			        	{"visible": false},
+			        	{"visible": false},
+			        	//star lesson feature
+			        	{"visible": true, className: "none"},//we need to mark it as visible:true, but set manually display:none to be able to access it from toggleFavoriteLesson() method
+			        	//lesson image
+			            {
+			               'orderable': false,
+			               className: "text-left"
+			            },
+			          	//learners number
+			            {
+				           'orderable': false,
+				           "visible": lessonsTable.data("is-user-monitor")
+				           //className: "d-none d-md-inline"
+				        },
+			          	//chart
+			            {
+				           'orderable': false,
+				           "visible": lessonsTable.data("is-user-monitor")
+				        },
+				        //buttons
+			            {
+			               'data': 'extn',
+			               "visible": lessonsTable.data("is-user-monitor")
+			            },
+			        	//row-reordering feature
+			        	{"width": "20px", "visible": lessonsTable.data("row-reordering-enabled")},
+			         ]
+					})
+					.on( 'row-reorder', function ( e, diff, edit ) {
+						//store new lesson order in DB
+						var orgId = lessonsTable.data("orgid");
+						var lessonIds = $("tbody tr", lessonsTable).map(function() { 
+						    return $(this).data("lessonid"); 
+						}).get().join(',');
+						$.ajax({
+							url : "servlet/saveLessonOrder",
+							data : {
+								orgId : orgId,
+								ids : lessonIds
+							},
+							error : function() {
+								alert("There was an error trying to save new lesson order.");
+							}
+						});
+				    })
+				    .on( 'draw.dt', function ( e, diff, edit ) {
+					    $(".chart-area").each(function() {
+						    var chart = $(this);
+							new Chart(chart.get(0).getContext('2d'), {
+								type: 'doughnut',
+								data: {
+									datasets: [{
+										data: [
+											chart.data("count-completed-learners"),
+											chart.data("count-attempted-learners"),
+											chart.data("count-not-started-learners")
+										],
+										backgroundColor: [
+											'rgb(199, 234, 70)',//green
+											'rgb(252, 226, 5)',//yellow
+											'rgb(255, 146, 140)'//red
+										]
+									}],
+									labels: [
+										'Completed',
+										'Attempted',
+										'Not Started'
+									]
+								},
+								options: {
+									responsive: true,
+									legend: false
+								}
+							});
+						});
+
+					    $("time.timeago").timeago();
+				    });
+				    //invoke datatables' draw.dt event, to display charts and timeago labels 
+			    	lessonsTable.trigger('draw.dt');
+				});
 			}
 		);    
 	});
 }
 
 
+function orderDatatable(button, tableId){
+	var selectedOrderId = $(button).val();
+
+	//hide row-reorder if non-default order is selected
+	if ( !$("#" + tableId).hasClass("cards")) {
+		if (selectedOrderId == 0) {
+			$("td.row-reorder", $("#" + tableId)).show();
+		} else {
+			$("td.row-reorder", $("#" + tableId)).hide();
+		}
+	}
+	
+	var orderDirection = selectedOrderId == 0 ? 'asc':'desc';
+	$("#" + tableId).DataTable().order([selectedOrderId, orderDirection]).draw();
+}
+
+
 function toggleFavoriteOrganisation(orgId) {
 	$("#favorite-organisations-container").load(
 		"index/toggleFavoriteOrganisation.do",