SERV-2286 - datatable css WIP (no css for buttons yet)

src/Views/Limitless/Datatable/Attachments/datatables.init.js

@@ -99,8 +99,9 @@ function limitless_init_datatable() {
 
             // Define the table control elements to appear on the page and in what order.
             // https://datatables.net/reference/option/dom
-            let dom = showExportButtons ? 'Blfrtip' : 'lfrtip';
-
+            let dom = showExportButtons ?
+                '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"Bip>' :
+                '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>';
 
             // length menu
             let lengthMenu = [
@@ -121,7 +122,10 @@ function limitless_init_datatable() {
                 "columnDefs": orderable,
                 "buttons": exportButtons,
                 "language": {
-                    "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/German.json"
+                    "search": '_INPUT_',
+                    "searchPlaceholder": 'Suchen',
+                    "lengthMenu": '<span>Einträge anzeigen</span> _MENU_',
+                    "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/German.json",
                 },
                 "lengthMenu": lengthMenu,
                 "drawCallback": function (settings) {
@@ -129,11 +133,7 @@ function limitless_init_datatable() {
                     // calculate height for animation
                     var height = $('#' + settings.sTableId).parents('.dataTables_wrapper').first().height() + 10;
 
-                    // add classes to filter and select dropdown
-                    $('.dataTables_filter input').addClass('DatatableSearch');
-                    $('.dataTables_length label select').addClass('DatatableFilter');
-                    $('.dataTables_info').addClass('d-none d-lg-block d-md-block');
-                    $('.dataTables_length').addClass('d-none d-lg-block d-md-block');
+                    setSelect2();
 
                     // get int from callback
                     var callbbackid = settings.sTableId.replace(/[^\d.]/g, '');
@@ -165,4 +165,23 @@ function limitless_init_datatable() {
     }, 300);
 }
 
-$(document).ready(limitless_init_datatable);
+// Select2 for length menu styling
+function setSelect2() {
+
+    if (!$().select2) {
+        console.warn('Warning - select2.min.js is not loaded.');
+        return;
+    }
+
+    // Initialize
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        dropdownAutoWidth: true,
+        width: 'auto'
+    });
+}
+
+
+$(document).ready(function() {
+    limitless_init_datatable();
+});

src/Views/Limitless/Datatable/Config.php

@@ -43,7 +43,6 @@
             $this->assetAllocation = [
                 'Limitless::DatatableStart' => [
                     'Attachments/jquery.dataTables.min.js',
-                    'Attachments/jquery.dataTables.min.css',
                     'Attachments/exporting/buttons.dataTables.min.css',
                     'Attachments/exporting/dataTables.buttons.min.js',
                     'Attachments/exporting/jszip.min.js',
@@ -53,7 +52,8 @@
                     'Attachments/exporting/buttons.print.min.js',
                     'Attachments/datatables.init.js',
                     'Attachments/datatables.init.css',
-                    'datatable.css'
+                    'datatable.css',
+                    secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/forms/selects/select2.min.js'),
                 ]
             ];
         }

src/Views/Limitless/Datatable/datatable.css

-.dataTables_filter label, .dataTables_length label {
-    color: #aaa;
-}
-
 table.dataTable.display>tbody>tr.odd>.sorting_1 {
     box-shadow: inset 0 0 0 9999px rgb(0 0 0 / 20%);
 }