Using datatables to render home dashboard

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

@@ -14,9 +14,10 @@
             <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>Name</th>
+			            <th>Product</th>
 			            <th>Status</th>
 			            <th>Next Invoice</th>
 		            </tr>
@@ -24,7 +25,7 @@
                 <tfoot>
 		            <tr>
 		                <th>Count {{ $user->services_active->count() }}</th>
-		                <th colspan="4">&nbsp;</th>
+		                <th colspan="5">&nbsp;</th>
 		            </tr>
                 </tfoot>
             </table>
@@ -40,32 +41,44 @@
 	@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() {
-            var table = $('#services').DataTable( {
+            $('#services').DataTable( {
                 rowGroup: {
-                    dataSrc: 'product_id',
+                    dataSrc: 'product_name',
                     startRender: null,
                     endRender: function ( rows, group ) {
-                        return group +' ('+rows.count()+')';
+                        return rows.count()+' x ' + group;
                     },
                 },
-                orderFixed: [2, 'asc'],
+                orderFixed: [3, 'asc'],
                 responsive: true,
-                ajax: "/api/u/services",
+                ajax: {
+                    url: "/api/u/services"
+                },
                 columns: [
-                    {
-                        defaultContent: '&nbsp;'
-                    },
-                    { data: "id" },
-                    { data: "product_id" },
-	                { data: "active" },
-                    { data: "date_next_invoice" }
+                    { data: "service_id_url" },
+                    { data: "category" },
+					{ data: "service_name" },
+                    { data: "product_name" },
+	                { data: "status" },
+                    { data: "next_invoice" }
                 ],
                 language: {
                     emptyTable: "No Active Services"
                 },
-                order: [4, 'asc']
+                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>