datatables di downlaod

resources/views/webprofile/front/jollyany/download.blade.php

 @extends('webprofile.front.jollyany.master')
 
+@section('assets')
+<!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
+<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css"> -->
+
+<link rel="stylesheet" href="{!! asset('backend/js/datatables.net-bs/css/dataTables.bootstrap.min.css') !!}">
+   
+<style>
+
+tr.group,
+tr.group:hover {
+    background-color: #ddd !important;
+}
+
+</style>
+@endsection
+
 @section('meta')
 <meta name="{{ Str::slug($setting['web_title']) }}" content="custom"/>
   <meta name="description" content="{{ $setting['web_title'] }}">
@@ -22,34 +38,39 @@
     <div class="container">
         <div class="row">
           <div id="main-content" class="col-md-12" role="main" align="justify">
-            <table class="table table-bordered">
+            <table class="table table-bordered data-table">
 				<thead>
 				<tr>
 					<th style="width: 5%;">No</th>
 					<th>Nama Dokumen</th>
+					<th style="width: 7%">Kategori</th>
 					<th style="width: 15%;">Tanggal Publikasi</th>
 					<th style="width: 20%;">Option</th>
 				</tr>
 				</thead>
 				<tbody>
 				@foreach ($categoriesFile as $value)
-				<tr>
-					<td colspan="4" style="font-weight: bold;">KATEGORI : {{ $value->name }}</td>
-				</tr>
+				<!-- <tr>
+					<td style="font-weight: bold;">KATEGORI : {{ $value->name }}</td>
+				</tr> -->
 					@php
 						$no = 1;
 					@endphp
+				
 					@foreach ($value->rFile as $item)
 					<tr>
 						<td style="text-align: center; color: black;">{{ $no++ }}</td>
 						<td style="color: black;">{{ $item->title }}</td>
+						<td style="text-align: center; color: black;"> {{ $value->name }}</td>
 						<td style="text-align: center; color: black;">{{ InseoHelper::tgl($item->created_at) }}</td>
 						<td style="text-align: center;">
 							<a href="{{ $setting['url_static'] . '/' . $setting['directory'] . '/file/' .$item->file }}" class="btn btn-info"><i class="fa fa-eye"> Lihat</i></a>
 							<a href="{{ url('downloadlink/'.$item->id) }}" class="btn btn-info"><i class="fa fa-download"> Download</i></a>
+
 						</td>
 					</tr>
 					@endforeach
+				
 				@endforeach
 				</tbody>
 			</table>
@@ -60,3 +81,67 @@
   </section><!--end white-wrapper -->
  
 @endsection
+@section('scripts')
+<script src="{!!asset('backend/js/datatables.net/js/jquery.dataTables.min.js') !!}"></script>
+<script src="{!!asset('backend/js/datatables.net-bs/js/dataTables.bootstrap.min.js') !!}"></script>
+<!-- <script src="{!!asset('backend/js/datatables.net-bs/js/dataTables.bootstrap.min.js') !!}"></script> -->
+
+<!-- <script src="{{ url('backend/assets/plugins/jquery-datatable/buttons/dataTables.buttons.min.js') }}"></script>
+<script src="{{ url('backend/assets/plugins/jquery-datatable/buttons/buttons.bootstrap4.min.js') }}"></script>
+<script src="{{ url('backend/assets/plugins/jquery-datatable/buttons/buttons.colVis.min.js') }}"></script>
+<script src="{{ url('backend/assets/plugins/jquery-datatable/buttons/buttons.html5.min.js') }}"></script>
+<script src="{{ url('backend/assets/plugins/jquery-datatable/buttons/buttons.print.min.js') }}"></script> -->
+
+<script>
+    // var url = "{{ route('download') }}";
+	
+// 	$(document).ready(function() {
+// 	 $('.data-table').DataTable();
+//  } );
+ $(document).ready(function() {
+    var groupColumn = 2;
+    var table = $('.data-table').DataTable({
+        "columnDefs": [
+            { "visible": false, "targets": groupColumn }
+        ],
+        "order": [[ groupColumn, 'asc' ]],
+        "displayLength": 25,
+        "drawCallback": function ( settings ) {
+            var api = this.api();
+            var rows = api.rows( {page:'current'} ).nodes();
+            var last=null;
+ 
+            api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
+                if ( last !== group ) {
+                    $(rows).eq( i ).before(
+                        '<tr class="group"><td colspan="5">'+group+'</td></tr>'
+                    );
+ 
+                    last = group;
+                }
+            } );
+        }
+    } );
+ 
+    // Order by the grouping
+    // $('.data-table tbody').on( 'click', 'tr.group', function () {
+    //     var currentOrder = table.order()[0];
+    //     if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
+    //         table.order( [ groupColumn, 'desc' ] ).draw();
+    //     }
+    //     else {
+    //         table.order( [ groupColumn, 'asc' ] ).draw();
+    //     }
+    // } );
+} );
+</script>
+{{ Html::script('js/master/file.js') }}
+  <!-- <script src="https://code.jquery.com/jquery-3.5.1.js"></script> 
+  <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
+  <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
+ <script>
+ $(document).ready(function() {
+	 $('.download').DataTable();
+ } );
+ </script> -->
+ @stop