Some datatables consistency

resources/views/system/home.blade.php

@@ -13,7 +13,7 @@
 
 	<div class="row">
 		<div class="col-12">
-			<p>This system is aware of the following systems:</p>
+			<p>This system is aware of the following systems @can('admin',(new \App\Models\System))(you can <a href="{{ url('ftn/system/addedit') }}">add</a> more)@endcan:</p>
 
 			@if (\App\Models\System::count() == 0)
 				@can('admin',(new \App\Models\System))
@@ -22,11 +22,7 @@
 					<p class="pad">There are no systems - you need to ask an admin to create one for you.</p>
 				@endcan
 			@else
-				@can('admin',(new \App\Models\System))
-					<p>You can <a href="{{ url('ftn/system/addedit') }}">Add New System</a>.</p>
-				@endcan
-
-				<table class="table monotable" id="systems">
+				<table class="table monotable" id="system">
 					<thead>
 					<tr>
 						<th>ID</th>
@@ -66,32 +62,44 @@
 @endsection
 
 @section('page-scripts')
-	<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" media="screen" >
+	<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" media="screen">
 	<link type="text/css" rel="stylesheet" href="{{ asset('plugin/dataTables/dataTables.bootstrap5.css') }}" media="screen">
 
 	<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
-	<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
+	<script type="text/javascript" src="{{ asset('plugin/dataTables/dataTables.conditionalPaging.js') }}"></script>
 	<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
 
 	<script type="text/javascript">
-		$('table tr').click(function() {
-			var href = $(this).find('a').attr('href');
+		$(document).ready(function() {
+			$('table tr').click(function() {
+				var href = $(this).find('a').attr('href');
 
-			if (href)
-				window.location = href;
-		});
+				if (href)
+					window.location = href;
+			});
 
-		$('#systems').DataTable({
-			paging: true,
-			pageLength: 25,
-			searching: true,
-			autoWidth: false,
-			columnDefs: [
-				{
-					targets: [5,6],
-					visible: false,
-				}
-			],
+			$('#system').DataTable({
+				paging: true,
+				pageLength: 25,
+				searching: true,
+				autoWidth: false,
+				conditionalPaging: {
+					style: 'fade',
+					speed: 500 // optional
+				},
+				language: {
+					paginate: {
+						previous: '&lt;&lt;',
+						next: '&gt;&gt;'
+					}
+				},
+				columnDefs: [
+					{
+						targets: [5,6],
+						visible: false,
+					}
+				],
+			});
 		});
 	</script>
 @append