Optimise rendering of domain list

resources/views/domain/list.blade.php

@@ -11,8 +11,8 @@
 			<p>Here is a list of known <strong class="highlight">FTN Networks</strong>.</p>
 		</div>
 
-		<div class="col-10 pt-2">
-			<table class="table monotable">
+		<div class="col-12 pt-2">
+			<table class="table monotable" id="ftnlist">
 				<thead>
 				<tr>
 					<th>Domain</th>
@@ -34,7 +34,7 @@
 							@endif
 						</td>
 						<td>{{ $do->zones->where('active',TRUE)->pluck('zone_id')->sort()->join(', ') }}</td>
-						<td class="text-end">{{ $do->active ? 'YES' : 'NO' }}</td>
+						<td class="text-end">{{ $do->active ? 'Active' : 'Not Active' }}</td>
 						<td class="text-end">{{ $do->managed() ? 'YES' : 'NO' }}</td>
 						<td>
 							@foreach (($x=$do->zones->pluck('addresses')->flatten())->where('role',\App\Models\Address::NODE_ZC)->sortBy('zone.zone_id') as $ao)
@@ -49,3 +49,57 @@
 		</div>
 	</div>
 @endsection
+
+@section('page-css')
+	@css('datatables')
+@append
+@section('page-scripts')
+	@js('datatables')
+
+	<script type="text/javascript">
+		$(document).ready(function() {
+			$('table tr').click(function() {
+				var href = $(this).find('a:not(.disabled)').attr('href');
+
+				if (href)
+					window.location = href;
+			});
+
+			$('#ftnlist').DataTable({
+				paging: true,
+				pageLength: 25,
+				searching: true,
+				autoWidth: false,
+				conditionalPaging: {
+					style: 'fade',
+					speed: 500 // optional
+				},
+				columnDefs: [
+					{
+						targets: 1,
+						type: 'num-fmt',
+						render: {
+							'sort': function (data,type,row,meta) {
+								return data ? parseFloat(data) : 0;
+							},
+						}
+					},
+					{
+						targets: [2],
+						visible: false,
+					},
+				],
+				orderFixed: [2, 'asc'],
+				rowGroup: {
+					dataSrc: [2],
+				},
+				language: {
+					paginate: {
+						previous: '&lt;&lt;',
+						next: '&gt;&gt;'
+					}
+				},
+			});
+		});
+	</script>
+@append