Updated datatables, using @pa instead of @js/@css, using conditionalPaging in datatables

resources/views/theme/backend/adminlte/account/widget/service_active.blade.php

@@ -1,17 +1,15 @@
 <!-- $o=Account::class -->
-@php
-	$o->load(['services_active.invoiced_service_items_active_recent']);
-@endphp
+@php($o->load(['services_active.invoiced_service_items_active_recent']))
 
 <!-- Show active services -->
 <div class="card card-light">
-	<div class="card-header">
+	<div class="card-header p-2">
 		<h3 class="card-title">Active Services</h3>
 	</div>
 
-	<div class="card-body">
+	<div class="card-body p-2">
 		@if(($x=$o->services_active)->count())
-			<table class="table table-striped table-hover w-100" id="services_active_{{ $ao->id }}">
+			<table class="table table-sm table-striped table-hover" id="services_active_{{ $ao->id }}">
 				<thead>
 				<tr>
 					<th>ID</th>
@@ -47,29 +45,29 @@
 	</div>
 </div>
 
-@section('page-styles')
-	@css(datatables,bootstrap4|rowgroup)
-@append
-@section('page-scripts')
-	@js(datatables,bootstrap4|rowgroup)
+@pa(datatables,rowgroup|conditionalpaging)
 
+@section('page-scripts')
 	<script type="text/javascript">
 		$(document).ready(function() {
-			$('#services_active_{{ $ao->id }}').DataTable({
-				order: [[1,'asc'],[2,'asc']],
-				rowGroup: {
-					dataSrc: 1,
-					endRender: function ( rows, group ) {
-						return rows.count()+' x ' + group;
+			@if($x->count())
+				$('#services_active_{{ $ao->id }}').DataTable({
+					conditionalPaging: true,
+					order: [[1,'asc'],[2,'asc']],
+					rowGroup: {
+						dataSrc: 1,
+						endRender: function (rows,group) {
+							return rows.count()+' x '+group;
+						},
 					},
-				},
-				columnDefs: [
-					{
-						targets: [1],
-						visible: false,
-					},
-				],
-			});
+					columnDefs: [
+						{
+							targets: [1],
+							visible: false,
+						},
+					],
+				});
+			@endif
 		});
 	</script>
 @append