osb/resources/theme/backend/adminlte/widgets/services_active.blade.php

<div class="box box-success small">
    <div class="box-header">
        <h3 class="box-title">Services</h3>
        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                <i class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                <i class="fa fa-times"></i></button>
        </div>
    </div>

    <div class="box-body">
        @if ($user->services_active->count())
            <table class="table table-bordered table-striped table-hover" id="services" style="width: 100%;">
	            <thead>
		            <tr>
						<th>ID</th>
			            <th>Category</th>
			            <th>Service</th>
			            <th>Product</th>
			            <th>Status</th>
			            <th>Next Invoice</th>
		            </tr>
	            </thead>
                <tfoot>
		            <tr>
		                <th>Count {{ $user->services_active->count() }}</th>
		                <th colspan="5">&nbsp;</th>
		            </tr>
                </tfoot>
            </table>
        @else
            <p>No services active</p>
        @endif
    </div>
</div>

@section('page-scripts')
	@css('https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css')
	@css('https://cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.dataTables.min.css')
	@js('https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js')
	@js('https://cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.min.js')

	<style>
		table.dataTable td {
			outline: none;
		}
	</style>
	<script type="text/javascript">
        $(document).ready(function() {
            $('#services').DataTable( {
                rowGroup: {
                    dataSrc: 'product_name',
                    startRender: null,
                    endRender: function ( rows, group ) {
                        return rows.count()+' x ' + group;
                    },
                },
                orderFixed: [3, 'asc'],
                responsive: true,
                ajax: {
                    url: "/api/u/services"
                },
                columns: [
                    { data: "service_id_url" },
                    { data: "category" },
					{ data: "service_name" },
                    { data: "product_name" },
	                { data: "status" },
                    { data: "next_invoice" }
                ],
                language: {
                    emptyTable: "No Active Services"
                },
                order: [5, 'asc']
            });

            $('#services tbody').on('click','tr', function () {
                $(this).toggleClass('selected');
                //var data = table.row(this).data();
                //window.location.href = '/u/service/view/'+data.id;
            });
        });
		</script>
@append