wip

src/resources/assets/css/common.css

@@ -208,6 +208,22 @@
     /* W3C */
 }
 
+.dataTables_wrapper > div.table-footer > div:nth-child(1) > div.dt-length {
+    display: flex;
+}
+
+.dataTables_wrapper > div.table-footer > div:nth-child(1) > div.dt-length select {
+   width: 4rem;
+}
+
+.dataTables_wrapper > div.table-footer > div:nth-child(1) > div.dt-length > label{
+    white-space: nowrap;
+}
+
+div.dt-container div.dt-paging ul.pagination  {
+    justify-content: flex-end;
+}
+
 .dataTables_wrapper .dataTables_paginate .paginate_button:active {
     outline: none;
     background-color: #2b2b2b;
@@ -237,25 +253,58 @@
     padding-left: 0.6rem;
 }
 
-.dataTables_processing.card {
-    all: unset;
-    position: absolute;
-    background: rgba(255, 255, 255, 0.9);
-    height: calc(100% - 6px);
-    width: calc(100% - 20px);
-    top: 0;
-    left: 10px;
-    z-index: 999;
-    border-radius: 5px;
-    overflow: hidden;
+/* Improved spinner display for DataTables */
+.dataTables_processing,
+.dt-processing {
+    background: rgba(255, 255, 255, 0.8) !important;
+    color: transparent !important; /* Hide any text */
+    border: none !important;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
+    border-radius: 5px !important;
+    /* Full table content coverage */
+    width: 100% !important;
+    height: 100% !important;
+    /* Position it to cover the entire table content */
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    /* Reset transform since we're using top/left 0 */
+    transform: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    z-index: 999 !important;
+    /* Center the spinner image using flex */
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
 }
 
-.dataTables_processing.card > img {
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+/* Make sure the spinner image displays properly */
+.dataTables_processing img,
+.dt-processing img {
+    display: block !important;
+    width: 60px !important;
+    height: 60px !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+    margin: 0 auto !important;
+}
+
+/* Hide any text that might be in the processing element */
+.dataTables_processing > *:not(img),
+.dt-processing > *:not(img) {
+    display: none !important;
+}
+
+/* Ensure it's hidden when processing is done */
+.dataTables_processing:not([style*="block"]),
+.dt-processing:not([style*="block"]) {
+    display: none !important;
+}
+
+/* Ensure proper positioning context */
+.table-content {
+    position: relative !important;
 }
 
 .dataTables_wrapper table.dataTable .crud_bulk_actions_line_checkbox {
@@ -270,6 +319,10 @@
     display: none !important;
 }
 
+.dt-processing.card > div {
+    display: none !important;
+}
+
 .dt-buttons,
 .dtr-modal .details-control,
 .modal .details-control {

src/resources/views/crud/datatable/datatable.blade.php

@@ -118,11 +118,6 @@ class="{{ backpack_theme_config('classes.table') ?? 'table table-striped table-h
 @endif
 
   @section('after_styles')
-  {{-- DATA TABLES --}}
-  @basset('https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css')
-  @basset('https://cdn.datatables.net/fixedheader/3.3.1/css/fixedHeader.dataTables.min.css')
-  @basset('https://cdn.datatables.net/responsive/2.4.0/css/responsive.dataTables.min.css')
-
   {{-- CRUD LIST CONTENT - crud_list_styles stack --}}
   @stack('crud_list_styles')
 @endsection

src/resources/views/crud/datatable/datatables_logic.blade.php

@@ -9,16 +9,18 @@
 @endphp
 
 {{-- DATA TABLES SCRIPT --}}
-@basset('https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js')
-@basset('https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js')
-@basset('https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js')
-@basset('https://cdn.datatables.net/responsive/2.4.0/css/responsive.dataTables.min.css')
-@basset('https://cdn.datatables.net/fixedheader/3.3.1/js/dataTables.fixedHeader.min.js')
-@basset('https://cdn.datatables.net/fixedheader/3.3.1/css/fixedHeader.dataTables.min.css')
-@basset(base_path('vendor/backpack/crud/src/resources/assets/css/responsive-modal.css'), false)
-
+@basset("https://cdn.datatables.net/2.1.8/js/dataTables.min.js")
+@basset("https://cdn.datatables.net/2.1.8/js/dataTables.bootstrap5.min.js")
+@basset("https://cdn.datatables.net/responsive/3.0.3/js/dataTables.responsive.min.js")
+@basset('https://cdn.datatables.net/fixedheader/4.0.1/js/dataTables.fixedHeader.min.js')
 @basset(base_path('vendor/backpack/crud/src/resources/assets/img/spinner.svg'), false)
 
+@push('before_styles')
+    @basset('https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap5.min.css')
+    @basset("https://cdn.datatables.net/responsive/3.0.3/css/responsive.dataTables.min.css")
+    @basset('https://cdn.datatables.net/fixedheader/4.0.1/css/fixedHeader.dataTables.min.css')
+@endpush
+
 <script>
 // here we will check if the cached dataTables paginator length is conformable with current paginator settings.
 // datatables caches the ajax responses with pageLength in LocalStorage so when changing this
@@ -232,7 +234,7 @@ functionsToRunOnDataTablesDrawEvent: [],
     @if ($crud->getResponsiveTable())
     responsive: {
         details: {
-            display: $.fn.dataTable.Responsive.display.modal( {
+            display: DataTable.Responsive.display.modal( {
                 header: function ( row ) {
                     return '';
                 },
@@ -326,6 +328,7 @@ functionsToRunOnDataTablesDrawEvent: [],
     autoWidth: false,
     pageLength: $dtDefaultPageLength,
     lengthMenu: $pageLength,
+    pagingType: "simple_numbers",
     /* Disable initial sort */
     aaSorting: [],
     language: {
@@ -337,7 +340,7 @@ functionsToRunOnDataTablesDrawEvent: [],
           "thousands":      "{{ trans('backpack::crud.thousands') }}",
           "lengthMenu":     "{{ trans('backpack::crud.lengthMenu') }}",
           "loadingRecords": "{{ trans('backpack::crud.loadingRecords') }}",
-          "processing":     "<img src='{{ Basset::getUrl('vendor/backpack/crud/src/resources/assets/img/spinner.svg') }}' alt='{{ trans('backpack::crud.processing') }}'>",
+          "processing":     "<img src='{{ Basset::getUrl('vendor/backpack/crud/src/resources/assets/img/spinner.svg') }}' alt='{{ trans('backpack::crud.processing') }}' style='display:block !important;width:60px !important;height:60px !important;'>",
           "search": "_INPUT_",
           "searchPlaceholder": "{{ trans('backpack::crud.search') }}...",
           "zeroRecords":    "{{ trans('backpack::crud.zeroRecords') }}",
@@ -582,7 +585,7 @@ function setupTableUI(tableId, config) {
 
     $(`#${tableId}_wrapper .table-footer .btn-secondary`).removeClass('btn-secondary');
 
-    $(".navbar.navbar-filters + div").css('overflow','initial');
+    $(".navbar.navbar-filters + div").css('overflow','hidden');
 
     if (config.subheading) {
         $(`#${tableId}_info`).hide();
@@ -639,6 +642,17 @@ function setupTableEvents(tableId, config) {
 
     // on DataTable draw event run all functions in the queue
     $(`#${tableId}`).on('draw.dt', function() {
+        console.log('draw event fired for table: ' + tableId);
+        // in datatables 2.0.3 the implementation was changed to use `replaceChildren`, for that reason scripts 
+         // that came with the response are no longer executed, like the delete button script or any other ajax 
+         // button created by the developer. For that reason, we move them to the end of the body
+         // ensuring they are re-evaluated on each draw event.
+         document.getElementById(tableId).querySelectorAll('script').forEach(function(script) {
+            const newScript = document.createElement('script');
+            newScript.text = script.text;
+            document.body.appendChild(newScript);
+        });
+
         window.crud.defaultTableConfig.functionsToRunOnDataTablesDrawEvent.forEach(function(functionName) {
             config.executeFunctionByName(functionName);
         });