Optimise rendering of bbs list

resources/views/system/list.blade.php

@@ -12,7 +12,7 @@
 		</div>
 
 		<div class="col-12 pt-2">
-			<table class="table monotable">
+			<table class="table monotable" id="bbslist">
 				<thead>
 				<tr>
 					<th class="w-25">System</th>
@@ -40,3 +40,31 @@
 		</div>
 	</div>
 @endsection
+
+@section('page-css')
+	@css('datatables')
+@append
+@section('page-scripts')
+	@js('datatables')
+
+	<script type="text/javascript">
+		$(document).ready(function() {
+			$('#bbslist').DataTable({
+				paging: true,
+				pageLength: 25,
+				searching: true,
+				autoWidth: false,
+				conditionalPaging: {
+					style: 'fade',
+					speed: 500 // optional
+				},
+				language: {
+					paginate: {
+						previous: '&lt;&lt;',
+						next: '&gt;&gt;'
+					}
+				},
+			});
+		});
+	</script>
+@append