SERV-2286 - datatable css + responsiveness

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

@@ -2,7 +2,7 @@
 function limitless_init_datatable() {
 
     // counter for datatables
-    var DatatableCounter = 0;
+    let DatatableCounter = 0;
 
     // scann for each datatable
     $('.LimitlessTable').each(function () {
@@ -17,7 +17,7 @@ function limitless_init_datatable() {
 
     setTimeout(function () {
         // reset counter for datatables
-        var DatatableCounter = 0;
+        let DatatableCounter = 0;
 
         // scann for each datatable
         $('.LimitlessTable').each(function () {
@@ -28,11 +28,11 @@ function limitless_init_datatable() {
             // element
             let elementTable = $(this);
 
-            var currentClass = elementTable.attr('class');
+            let currentClass = elementTable.attr('class');
             currentClass = currentClass.replace('LimitlessTable','');
 
             // create replacement
-            var NewHtml = '' +
+            let NewHtml = '' +
                 '<div id="DatatableFader' + DatatableCounter + '" class="DatatableFader">' +
                 '<table id="Datatable' + DatatableCounter + '" class="display table datatable ' + currentClass + '">' +
                 elementTable.html() +
@@ -44,9 +44,9 @@ function limitless_init_datatable() {
 
 
             // render setup parameter
-            var counter = 0;
-            var sort = [];
-            var orderable = [];
+            let counter = 0;
+            let sort = [];
+            let orderable = [];
 
             $('#Datatable' + DatatableCounter).find('th').each(function () {
 
@@ -81,21 +81,20 @@ function limitless_init_datatable() {
             });
 
             // rows
-            var rows = elementTable.attr('rows');
+            let rows = elementTable.attr('rows');
             if (rows == undefined) {
                 rows = 10;
             }
 
             // check entry count
+            let Complex = false;
             if ($('#Datatable' + DatatableCounter).children('tbody').children('tr').length > rows) {
-                var Complex = true;
-            } else {
-                var Complex = false;
+                Complex = true;
             }
 
             // export buttons
             let showExportButtons = elementTable.attr('exportable') != undefined && (elementTable.attr('exportable') == "true" || elementTable.attr('exportable') == true);
-            let exportButtons = ['copy', 'csv', 'excel', 'pdf', 'print'];
+            let exportButtons = setExportButtons();
 
             // Define the table control elements to appear on the page and in what order.
             // https://datatables.net/reference/option/dom
@@ -130,39 +129,78 @@ function limitless_init_datatable() {
                 "lengthMenu": lengthMenu,
                 "drawCallback": function (settings) {
 
-                    // calculate height for animation
-                    var height = $('#' + settings.sTableId).parents('.dataTables_wrapper').first().height() + 10;
-
                     setSelect2();
+                    animate(settings);
 
-                    // get int from callback
-                    var callbbackid = settings.sTableId.replace(/[^\d.]/g, '');
+                }
+            });
+        });
 
-                    // remove loader
-                    $('#DatatableLoader' + callbbackid).remove();
+    }, 300);
+}
 
-                    // break after inti
-                    if ($('#DatatableFader' + callbbackid).css("opacity") == 1) {
-                        return false;
-                    }
+function animate(settings) {
 
-                    // scale up table
-                    $('#DatatableFader' + callbbackid).animate({
-                        'opacity': '1',
-                        'min-height': height
-                    }, 300, function () {
+    // calculate height for animation
+    let height = $('#' + settings.sTableId).parents('.dataTables_wrapper').first().height() + 10;
 
-                        // fix height for responsible design
-                        $('#DatatableFader' + callbbackid).css("height", "auto");
-                        $('#DatatableFader' + callbbackid).css("min-height", "auto");
+    // get int from callback
+    let callbbackid = settings.sTableId.replace(/[^\d.]/g, '');
 
-                    });
+    // remove loader
+    $('#DatatableLoader' + callbbackid).remove();
 
-                }
-            });
-        });
+    // break after inti
+    if ($('#DatatableFader' + callbbackid).css("opacity") == 1) {
+        return false;
+    }
+
+    // scale up table
+    $('#DatatableFader' + callbbackid).animate({
+        'opacity': '1',
+        'min-height': height
+    }, 300, function () {
+        // fix height for responsible design
+        $('#DatatableFader' + callbbackid).css("height", "auto");
+        $('#DatatableFader' + callbbackid).css("min-height", "auto");
+    });
+}
+
+// modified default class of export buttons.
+// https://datatables.net/reference/option/buttons.dom.button
+function setExportButtons() {
+
+    return {
+        dom: {
+            button: {
+                tag: 'button',
+                className: ''
+            }
+        },
+        buttons: [
+            {
+                extend: 'copy',
+                className: 'btn btn-light'
+            },
+            {
+                extend: 'csv',
+                className: 'btn btn-light'
+            },
+            {
+                extend: 'excel',
+                className: 'btn btn-light'
+            },
+            {
+                extend: 'pdf',
+                className: 'btn btn-light'
+            },
+            {
+                extend: 'print',
+                className: 'btn btn-light'
+            },
+        ]
+    };
 
-    }, 300);
 }
 
 // Select2 for length menu styling

src/Views/Limitless/Datatable/datatable.css

+/* HIGHLIGHT SORTED COLUMN */
 table.dataTable.display>tbody>tr.odd>.sorting_1 {
     box-shadow: inset 0 0 0 9999px rgb(0 0 0 / 20%);
 }
@@ -6,52 +7,24 @@ table.dataTable.display>tbody>tr.even>.sorting_1 {
     box-shadow: inset 0 0 0 9999px rgb(0 0 0 / 10%);
 }
 
-/*.table.dataTable.no-footer {*/
-/*    border: 0px!important;*/
-/*}*/
 
-/*.DatatableSearch {*/
-/*    border: 1px solid #888888;*/
-/*}*/
-
-/*.DatatableFilter {*/
-/*    border: 1px solid #888888;*/
-/*    margin: 5px;*/
-/*}*/
-
-/*.dataTable tbody td {*/
-/*    vertical-align: middle;*/
-/*    text-align: center;*/
-/*}*/
-
-/*.dataTable tbody td {*/
-/*    vertical-align: middle;*/
-/*    text-align: center;*/
-/*}*/
-
-/*.table thead:first-child tr:first-child th {*/
-/*    border-top: 1px solid #ddd;*/
-/*}*/
-
-/*.table thead th {*/
-/*    vertical-align: middle;*/
-/*    border-bottom: 1px solid #b7b7b7;*/
-/*}*/
-
-/*.dataTable thead th {*/
-/*    padding-right: 2.5rem;*/
-/*    font-weight: 500;*/
-/*    padding: .75rem 1.25rem;*/
-/*}*/
-
-/*.dataTable {*/
-/*    border-collapse: collapse!important;*/
-/*}*/
+/* EXPORT BUTTONS */
+.dt-buttons .btn {
+    margin-bottom: 0.333em;
+}
 
-/*.c8tableBody {*/
-/*    width: 100%;*/
-/*    overflow-x: auto;*/
-/*}*/
+.dt-buttons {
+    margin-right: 1.25rem;
+}
 
+@media screen and (max-width: 640px) {
+    div.dt-buttons {
+        margin-right: 0;
+    }
+}
 
-/*table.fixedHeader-floating{position:fixed !important;background-color:white}table.fixedHeader-floating.no-footer{border-bottom-width:0}table.fixedHeader-locked{position:absolute !important;background-color:white}@media print{table.fixedHeader-floating{display:none}}*/
\ No newline at end of file
+@media (max-width: 1180px) {
+    div.dt-buttons {
+        width: 100%;
+    }
+}