<script src="/confluence/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/confluence/js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="/confluence/js/jquery.dataTables.min.js"></script>
<script id="serviceTemplate" type="text/x-jquery-tmpl">

	<tr>
		<td class="title">${ displayName }</td>
		<td class="text">${ description }</td>
		<td class="title">${ organization }</td>
		<td class="link"><a href="${url}" target="_blank">Open</a></td>
	</tr>

</script>
<script type="text/javascript">
 
	AJS.toInit(function(){

		var services;

		$.getJSON('/confluence/js/services.json', {format: 'json'}, function(data) {
 
		        $('#serviceTemplate').tmpl(data).appendTo('#services');

		        $('#serviceList').dataTable({

				"aaSorting": [[ 0, "asc" ]], 
				"sPaginationType": "full_numbers", 
				"bLengthChange": false,
				"iDisplayLength": 10, 
				"oLanguage": {
					     "sSearch": "Filter Services"
				}

			});

		});

	});

</script>

 
	<table id='serviceList'>
	<thead>
	<tr>
	<th>Service Name</th>
	<th>Service Description</th>
	<th>Organisation</th>
	<th>Link</th>
	</tr>
	</thead>
	<tbody id="services">
	</tbody>
	</table>