SERV-2286 - datatable element WIP

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

+// define function
+function limitless_init_datatable() {
+
+    // counter for datatables
+    var DatatableCounter = 0;
+
+    // scann for each datatable
+    $('.LimitlessTable').each(function () {
+
+        // count table
+        DatatableCounter++;
+
+        // loading bar
+        $(this).before('<div id="DatatableLoader' + DatatableCounter + '"><br/><center><b>[ LADE DATEN... ]</b></center><br/></div>');
+
+    });
+
+    setTimeout(function () {
+        // reset counter for datatables
+        var DatatableCounter = 0;
+
+        // scann for each datatable
+        $('.LimitlessTable').each(function () {
+
+            // count table
+            DatatableCounter++;
+
+            var currentClass = $(this).attr('class');
+            currentClass = currentClass.replace('LimitlessTable','');
+
+            // create replacement
+            var NewHtml = '' +
+                '<div id="DatatableFader' + DatatableCounter + '" class="DatatableFader" style="height:0px; opacity:0; overflow-y: hidden;">' +
+                '<table id="Datatable' + DatatableCounter + '" class="display table datatable ' + currentClass + '">' +
+                $(this).html() +
+                '</table>' +
+                '</div>';
+
+            // transport code to html
+            $(this).replaceWith(NewHtml);
+
+            // render setup parameter
+            var counter = 0;
+            var sort = [];
+            var orderable = [];
+            $('#Datatable' + DatatableCounter).find('th').each(function () {
+                // define sort
+                if ($(this).attr('Sort') != undefined) {
+                    sort = [
+                        [counter, $(this).attr('Sort')]
+                    ];
+                }
+
+                // orderable
+                if ($(this).attr('Sortable') == "false") {
+                    orderable.push({
+                        "orderable": false,
+                        "targets": counter
+                    });
+                }
+
+                // searchable
+                if ($(this).attr('Searchable') != "true") {
+                    orderable.push({
+                        "searchable": false,
+                        "targets": counter
+                    });
+                }
+
+
+                // counter
+                counter++;
+            });
+
+            // rows
+            var rows = $(this).attr('rows');
+            if (rows == undefined) {
+                rows = 10;
+            }
+
+            // check entry count
+            if ($('#Datatable' + DatatableCounter).children('tbody').children('tr').length > rows) {
+                var Complex = true;
+            } else {
+                var Complex = false;
+            }
+
+            if($('table').hasClass('downloadbuttons')){
+
+                $(".dt-buttons").removeClass('hideBtn');
+                $(".dt-buttons").addClass('showBtn');
+
+            } else {
+                $(".dt-buttons").addClass('hideBtn');
+            }
+
+            // activate datatable
+            $('#Datatable' + DatatableCounter).dataTable({
+                'dom': '<"c8tableTools01"Bf><"c8tableBody"t><"c8tableTools02"lipr>',
+                "fixedHeader": true,
+                'autoWidth': true,
+                'pageLength': parseInt(rows),
+                "order": sort,
+                "paging": Complex,
+                "searching": Complex,
+                "info": Complex,
+                "columnDefs": orderable,
+                "buttons": [
+                    'csv', 'excel'
+                ],
+                "language": {
+                    "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/German.json"
+                },
+                "lengthMenu": [
+                    [rows, 10, 25, 50, 100, 500, -1],
+                    ['Standard (' + rows + ')', 10, 25, 50, 100, 500, "Alle"]
+                ],
+                "drawCallback": function (settings) {
+
+                    var hasClass = $('table').hasClass('downloadbuttons');
+
+                    if($('.buttons-excel').length > 0) {
+                        $('.buttons-excel')[0].style.visibility = hasClass ? 'visible' : 'hidden';
+                    }
+
+                    if($('.buttons-csv').length > 0) {
+                        $('.buttons-csv')[0].style.visibility = hasClass ? 'visible' : 'hidden';
+                    }
+
+
+                    // 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');
+
+                    // get int from callback
+                    var 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");
+
+                    });
+
+                }
+            });
+        });
+
+    }, 300);
+}
+
+$(document).ready(limitless_init_datatable);

src/Views/Limitless/Datatable/Attachments/exporting/buttons,print.min.js

+/*!
+ Print button for Buttons and DataTables.
+ 2016 SpryMedia Ltd - datatables.net/license
+*/
+(function(b){"function"===typeof define&&define.amd?define(["jquery","datatables.net","datatables.net-buttons"],function(c){return b(c,window,document)}):"object"===typeof exports?module.exports=function(c,g){c||(c=window);g&&g.fn.dataTable||(g=require("datatables.net")(c,g).$);g.fn.dataTable.Buttons||require("datatables.net-buttons")(c,g);return b(g,c,c.document)}:b(jQuery,window,document)})(function(b,c,g,y){var u=b.fn.dataTable,n=g.createElement("a"),v=function(a){n.href=a;a=n.host;-1===a.indexOf("/")&&
+0!==n.pathname.indexOf("/")&&(a+="/");return n.protocol+"//"+a+n.pathname+n.search};u.ext.buttons.print={className:"buttons-print",text:function(a){return a.i18n("buttons.print","Print")},action:function(a,k,p,h){a=k.buttons.exportData(b.extend({decodeEntities:!1},h.exportOptions));p=k.buttons.exportInfo(h);var w=k.columns(h.exportOptions.columns).flatten().map(function(d){return k.settings()[0].aoColumns[k.column(d).index()].sClass}).toArray(),r=function(d,e){for(var x="<tr>",l=0,z=d.length;l<z;l++)x+=
+        "<"+e+" "+(w[l]?'class="'+w[l]+'"':"")+">"+(null===d[l]||d[l]===y?"":d[l])+"</"+e+">";return x+"</tr>"},m='<table class="'+k.table().node().className+'">';h.header&&(m+="<thead>"+r(a.header,"th")+"</thead>");m+="<tbody>";for(var t=0,A=a.body.length;t<A;t++)m+=r(a.body[t],"td");m+="</tbody>";h.footer&&a.footer&&(m+="<tfoot>"+r(a.footer,"th")+"</tfoot>");m+="</table>";var f=c.open("","");f.document.close();var q="<title>"+p.title+"</title>";b("style, link").each(function(){var d=q,e=b(this).clone()[0];
+        "link"===e.nodeName.toLowerCase()&&(e.href=v(e.href));q=d+e.outerHTML});try{f.document.head.innerHTML=q}catch(d){b(f.document.head).html(q)}f.document.body.innerHTML="<h1>"+p.title+"</h1><div>"+(p.messageTop||"")+"</div>"+m+"<div>"+(p.messageBottom||"")+"</div>";b(f.document.body).addClass("dt-print-view");b("img",f.document.body).each(function(d,e){e.setAttribute("src",v(e.getAttribute("src")))});h.customize&&h.customize(f,h,k);a=function(){h.autoPrint&&(f.print(),f.close())};navigator.userAgent.match(/Trident\/\d.\d/)?
+        a():f.setTimeout(a,1E3)},title:"*",messageTop:"*",messageBottom:"*",exportOptions:{},header:!0,footer:!1,autoPrint:!0,customize:null};return u.Buttons});

src/Views/Limitless/Datatable/Config.php

+<?php
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Information
+    |------------------------------------------------------------------------------------------------
+    |
+    | This file is beautified by the command "sidekick:CodebeautifierCommand" of the ceetrox
+    | sidekick package.
+    |
+    | Author: Marco Schmiedel <marco.schmiedel@itmax.email>
+    | Update: 2022-06-15 10:07:09
+    |
+    */
+    namespace Ceetrox\Sidekick\Views\Limitless\Datatable;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Dependencies
+    |------------------------------------------------------------------------------------------------
+    */
+    use View;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Class "Config"
+    |------------------------------------------------------------------------------------------------
+    */
+    class Config
+    {
+        public $methodAllocation = [
+            'Limitless::DatatableStart' => 'datatableStart',
+            'Limitless::DatatableStop' => 'datatableStop',
+        ];
+
+        public $assetAllocation;
+
+        public function __construct()
+        {
+            $this->assetAllocation = [
+                'Limitless::DatatableStart' => [
+                'Attachments/datatables.js',
+                'Attachments/jquery.datatables.js',
+                ]
+            ];
+        }
+
+//      this jquery datatables
+//    secure_url("/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/demo_pages/datatables_basic.js"),
+//    secure_url("/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/tables/datatables/datatables.min.js"),
+//    secure_url("/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/forms/selects/select2.min.js"),
+
+        // NEXUS LIMITLESS
+//    'Attachments/datatables.js',
+//    'Attachments/jquery.datatables.js'
+//    'Attachments/jquery.datatables.css',
+//    'Attachments/exporting/buttons,print.min.js',
+//    'Attachments/exporting/buttons.flash.min.js',
+//    'Attachments/exporting/buttons.html5.min.js',
+//    'Attachments/exporting/datatables.buttons.min.js',
+//    'Attachments/exporting/jszip.min.js',
+//    'Attachments/exporting/pdfmake.min.js',
+//    'Attachments/exporting/vfs.fonts.js',
+//    'datatable.css'
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "datatableStart"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function datatableStart($parameters)
+        {
+            return View('Limitless::Datatable.Start')
+                ->withExtra( ($parameters['extra'] ?? []) );
+
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "datatableStop"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function datatableStop($parameters)
+        {
+            return View('Limitless::Datatable.Stop');
+
+        }
+
+    }
+
+
+

src/Views/Limitless/Datatable/Start.blade.php

+<div class="table-responsive">
+   <table
+   @foreach($extra as $k => $v)
+
+      @if($k == 'class')
+         @if(!strpos($v, 'LimitlessTable')) {{ $v = $v . ' ' . 'LimitlessTable' }} @endif
+      @endif
+
+      {{$k}}="{{$v}}"
+
+   @endforeach
+   class="table LimitlessTable" hidden>

src/Views/Limitless/Datatable/Stop.php

+</table>
+</div>

src/Views/Limitless/Datatable/TableAutofillBody.blade.php

+@if( !empty($data) )
+  <tbody>
+    @foreach($data as $tr)
+        <tr>
+            @foreach($tr as $td)
+                @if( @$td['secure'] === false)
+                     <td> {!! $td['value'] !!} </td>
+                @else
+                    <td> {{ $td['value'] }} </td>
+                @endif
+            @endforeach
+        </tr>
+     @endforeach
+  </tbody>
+@endif

src/Views/Limitless/Datatable/TableAutofillHeader.blade.php

+    @if( !empty($data) )
+      <thead>
+         <tr>
+            @foreach($data as $th)
+
+                @if( @$th['secure'] === false)
+                     <th> {!! $th['name'] !!} </th>
+                @else
+                    <th> {{ $th['name'] }} </th>
+                @endif
+
+            @endforeach
+         </tr>
+      </thead>
+      @endif

src/Views/Limitless/Datatable/datatable.css

+.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;
+}
+
+.c8tableBody {
+    width: 100%;
+    overflow-x: auto;
+}
+
+/*.DatatableFader {*/
+/*    opacity: 0;*/
+/*    overflow-y: hidden;*/
+/*}*/
+/*.LimitlessTable*/
+/*{*/
+/*    display: none;*/
+/*}*/
+
+
+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

src/Views/Limitless/Help/Layout/Master.blade.php

@@ -40,10 +40,14 @@
             @Limitless::SideNavMenuItem(['url' => '?page=Element.LoremIpsum', 'target' => '_self', 'icon' => 'icon-bubble-lines3', 'title' => 'Lorem Ipsum'])
             @Limitless::SideNavMenuItem(['url' => '?page=Modal', 'target' => '_self', 'icon' => 'icon-stack', 'title' => 'Modal'])
             @Limitless::SideNavMenuItem(['url' => '?page=Element.RandomSelect', 'target' => '_self', 'icon' => 'icon-shuffle', 'title' => 'Random Select'])
-            @Limitless::SideNavMenuItem(['url' => '?page=Table', 'target' => '_self', 'icon' => 'icon-table2', 'title' => 'Table'])
+
             @Limitless::SideNavMenuSectionTitle(['title' => 'Navigations'])
             @Limitless::SideNavMenuItem(['url' => '?page=Sidenav', 'target' => '_self', 'icon' => 'icon-sort', 'title' => 'Side Navigation'])
             @Limitless::SideNavMenuItem(['url' => '?page=Topnav', 'target' => '_self', 'icon' => 'icon-transmission', 'title' => 'Top Navigation'])
+
+            @Limitless::SideNavMenuSectionTitle(['title' => 'Tables'])
+            @Limitless::SideNavMenuItem(['url' => '?page=Table', 'target' => '_self', 'icon' => 'icon-table2', 'title' => 'Basic Table'])
+            @Limitless::SideNavMenuItem(['url' => '?page=Datatable', 'target' => '_self', 'icon' => 'icon-table2', 'title' => 'Data Table'])
         @Limitless::SideNavMenuStop
 
         @Limitless::SideNavMenuStart(['title' => 'Icons', 'icon' => 'far fa-images'])

src/Views/Limitless/Table/Config.php

@@ -73,7 +73,7 @@
         public function tableStart($parameters)
         {
             return View('Limitless::Table.TableStart')
-            ->withExtra( (isset($parameters['extra']) ? $parameters['extra'] : [] ) );
+            ->withExtra( ($parameters['extra'] ?? []) );
 
         }