update datatable

2026-01-30 13:56:32 +07:00
parent 9802839056
commit cfe38232c3
10 changed files with 292 additions and 215 deletions
@@ -1,35 +1,92 @@
@php
  $dtColumns = collect($columns)->map(function ($c) {
-      return [
-          'data' => $c['key'],
-          'name' => $c['key'],
-          'orderable' => $c['orderable'] ?? true,
-          'searchable' => $c['searchable'] ?? true,
-      ];
+    return [
+      'data' => $c['key'],
+      'name' => $c['key'],
+      'orderable' => $c['orderable'] ?? true,
+      'searchable' => $c['searchable'] ?? true,
+    ];
  })->values();
@endphp
-
-<div class="table-responsive">
-  <table id="{{ $id }}" class="table table-striped w-100">
-    <thead>
-      <tr>
-        @foreach($columns as $col)
-          <th>{{ $col['label'] }}</th>
-        @endforeach
-      </tr>
+    <table id="{{ $id }}" class="table table-hover table-bordered w-100 align-middle my-3">
+      <thead>
+        <tr>
+          @foreach($columns as $col)
+            <th>{{ $col['label'] }}</th>
+          @endforeach
+        </tr>
+    <tr>
+      @foreach($columns as $col)
+        <th>
+          @if(($col['searchable'] ?? true))
+            <input type="text" class="form-control form-control-sm column-search" placeholder="Search {{ $col['label'] }}"
+              data-column="{{ $loop->index }}">
+          @endif
+        </th>
+      @endforeach
+    </tr>
    </thead>
-  </table>
-</div>
+    </table>
+    @push('custom-scripts')
+      <script>
+        document.addEventListener('DOMContentLoaded', function () {
+          $.fn.DataTable.ext.pager.numbers_length = 7;

-@push('custom-scripts')
-<script>
-document.addEventListener('DOMContentLoaded', function () {
-  $('#{{ $id }}').DataTable({
-    processing: true,
-    serverSide: true,
-    ajax: '{{ $ajax }}',
-    columns: @json($dtColumns),
-  });
-});
-</script>
-@endpush
+          var table = $('#{{ $id }}').DataTable({
+            processing: true,
+            serverSide: true,
+            ajax: '{{ $ajax }}',
+            columns: @json($dtColumns),
+            orderCellsTop: true, // Important for the second header row
+            fixedHeader: true,
+            pagingType: 'full_numbers',
+            language: {
+              searchPlaceholder: "Search records",
+              search: "",
+              lengthMenu: "_MENU_",
+            },
+            dom: "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
+          "<'row mt-3 align-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 d-flex align-items-center justify-content-end gap-2'lp>>",
+            initComplete: function () {
+              // Initialize select2 for length menu
+              $('.dataTables_length select').select2({
+                  minimumResultsForSearch: Infinity,
+                  width: '60px'
+              });
+
+              // Apply the search
+              this.api().columns().every(function () {
+                var that = this;
+                $('input', this.header()).on('keyup change clear', function () {
+                  if (that.search() !== this.value) {
+                    that
+                      .search(this.value)
+                      .draw();
+                  }
+                });
+              });
+            },
+            drawCallback: function() {
+                 if ($('.dataTables_length select').data('select2')) {
+                     $('.dataTables_length select').select2('destroy');
+                 }
+                 $('.dataTables_length select').select2({
+                     minimumResultsForSearch: Infinity,
+                     width: '60px'
+                 });
+            }
+          });
+
+          // Prevent sorting when clicking on the input
+          $('#{{ $id }} thead tr:eq(1) th').on('click', function (e) {
+            e.stopPropagation();
+          });
+
+          // Custom search logic for the individual inputs
+          $('#{{ $id }} .column-search').on('keyup change', function () {
+            var columnIndex = $(this).data('column');
+            table.column(columnIndex).search(this.value).draw();
+          });
+        });
+      </script>
+    @endpush