datatable scripts

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

@@ -307,5 +307,48 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
   <script type="text/javascript" src="https://statik.unesa.ac.id/profileunesa_konten_statik/front/switcher/js/fswit.js"></script>
   <script src="https://statik.unesa.ac.id/profileunesa_konten_statik/front/switcher/js/bootstrap-select.js"></script>
 
+
+<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>
+
+ $(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;
+                }
+            } );
+        }
+    } );
+ 
+
+} );
+</script>
+
+
 </body>
 </html>

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

@@ -287,5 +287,46 @@
   <script type="text/javascript" src="https://statik.unesa.ac.id/profileunesa_konten_statik/front/switcher/js/fswit.js"></script>
   <script src="https://statik.unesa.ac.id/profileunesa_konten_statik/front/switcher/js/bootstrap-select.js"></script>
 
+<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>
+
+ $(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;
+                }
+            } );
+        }
+    } );
+ 
+
+} );
+</script>
+
 </body>
 </html>