workspace-widget-portlet/src/main/webapp/html/workspacewidget/view.jsp

<%@include file="init.jsp"%>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
	rel="stylesheet">
	
<% pageContext.setAttribute("currentGroup", GroupLocalServiceUtil.getGroup(PortalUtil.getScopeGroupId(request)));
%>	
<script src="<%=renderRequest.getContextPath()%>/js/datatables.min.js"></script>

<portlet:resourceURL var="usersCustomDataSourceURL">
	<portlet:param name="cmd" value="itemId=" />
</portlet:resourceURL>
<portlet:resourceURL var="downloadFileURL">
	<portlet:param name="fileToDownloadId" value="itemId=" />
</portlet:resourceURL>

<table width="100%" style="border: none; border-collapse: inherit;">
	<tr>
		<td><div class="ws-breadcrumb-container"></div></td>
		<c:choose>
			<c:when test="${currentGroup.getParentGroupId() > 0}">
				<td><div class="ws-recents">
						<a><i style="font-size: 1.2em;" class="material-icons">access_time</i>
							<span>Recent</span></a>
					</div></td>
			</c:when>
			<c:otherwise>
			<td><div class="ws-recents">
						<a><i  class="material-icons">folder_special</i>&nbsp;
							<span>VRE Folders</span></a>
					</div></td>
			</c:otherwise>
		</c:choose>
	</tr>
</table>

<table id="userTable" class="display" cellspacing="0" width="100%">
	<thead>
		<tr>
			<th>Name</th>
			<th>Owner</th>
			<th>Last modified</th>
		</tr>
	</thead>
</table>
<c:if test="${currentGroup.getParentGroupId() > 0}">
    <div class="ws-go">
    	<a href="<%= StorageHubServiceUtil.getWorkspaceFolderURL(request) %>" target="_blank">
    	<i class="icon-folder-open" style="font-size: 14px;"></i>&nbsp;
    	<span>Go to shared workspace</span>
    	</a>
    </div>
</c:if>
<script>
function loadItemsListIntoTable(itemId, itemName) {
	var table = $('#userTable').DataTable();
	table.ajax.url('<%=usersCustomDataSourceURL%>'+itemId+'_selectedName='+itemName).load();
}

function downloadItem(itemId) {
	var uri = '<%=downloadFileURL%>'+itemId;
	window.open(uri, "_blank");
}

function mainTable() {
	var table = $('#userTable').DataTable( {
		retrieve: true, // tell DataTables that you are aware that the initialisation options can't be changed after initialisation, and that should that occur, that you just want the DataTable instance to be returned.
		"lengthMenu": [ [5, 12, 25, 50, -1], [5, 12, 25, 50, "All"] ],
		"dom": "<'row'<'small-6 columns'><'small-6 columns'>r>t<'row'<'mydt-pagination'p><'#mydtwrap'<'mydt-block'l><i>>'>",
		select: {
	         style: 'single'
	    },
		processing: true,
		serverSide: true, 
		searching: false,
		ordering:  false,
		"language": {
		      "emptyTable": "This folder is empty",
		      "info": "_START_ to _END_ of _TOTAL_ items"
		},
		"stripeClasses": [ 'strip1', 'strip2'],
	    "ajax": {
	      "url":"<%=usersCustomDataSourceURL%>",
	      "dataSrc": function ( json ) { //here is the json return by the ajax call
	    	  $( "div.ws-breadcrumb-container" ).html(json.breadcrumb);
	          return json.mytabledata;
	        }
	     },
	    "columns": [
	        { "data": "Name",
	          "render": function ( data, type, row, meta ) {
	        	var obj = JSON.parse(data);
	        	var truncatedName = truncateText(obj.Name);
	        	var anchorURL = '<a  title="'+obj.Name+'" target="_blank" href="<%=downloadFileURL%>'+obj.Id+'">'+truncatedName+'<a/>';
	         	if(obj.isFolder) {
	         		anchorURL = '<a title="'+obj.Name+'" href="javascript:loadItemsListIntoTable(\''+obj.Id+'\',\''+obj.Name+'\');">'+truncatedName+'<a/>';
	         	}
	          	return '<div class="noselect" style="display: table;">'+
	          	'<span style="padding: 5px; background-color: white; border-radius: 20px; color: '+ obj.IconColor+ '; font-size: 1.5em; vertical-align: middle; display: table-cell;">'+
	          	'<i class="material-icons " title="'+obj.Name+'">'+obj.Icon+'</i></span>'+
	          	'<span style="padding-left: 10px; vertical-align: middle; display: table-cell;">'+
	        	anchorURL+
	        	'</span></div>';
	        	}
	        },
	        { "data": "Owner",
	          "render": function ( data, type, row, meta ) {
	        	  	if (data != "me") {
	        			return getInitials(data);
	        	  	}
					return data;
	           }
	        },
	        { "data": "LastModified" ,
		      "render": function ( data, type, row, meta ) {
		     		return '<span style="font-size: 12px;">'+data+'</span>';
		      }
	        }
	    ]
		} 
	);
	table
// 	.on( 'select', function ( e, dt, type, indexes ) {
// 		var selectedId = table.rows( indexes ).data().pluck( 'Id' )[0];
// 	} )
	.on( 'dblclick', 'tr', function (e, dt, type, indexes ) {    	
		var selectedRowIndex = table.row( this ).index();
	 	//console.log("->"+selectedRowIndex);
		var selectedId = table.rows( indexes ).data().pluck( 'Id' )[selectedRowIndex];
		var selectedNameData = table.rows( indexes ).data().pluck( 'Name' )[selectedRowIndex];
		var obj = JSON.parse(selectedNameData);
		var selectedName = obj.Name;
		if(obj.isFolder) 
	    	loadItemsListIntoTable(selectedId, selectedName);
		else
			downloadItem(selectedId);
	} )
	.on( 'error.dt', function ( e, settings, techNote, message ) {
	console.log( 'An error has happened in the server: ', message );
	} );
}

$(document).ready(mainTable);

</script>