SERV-2286 - datatable attributes modification

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

+.DatatableFader {
+    height:0px;
+    opacity:0;
+    overflow-y: hidden;
+}
\ No newline at end of file

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

@@ -25,34 +25,42 @@ function limitless_init_datatable() {
             // count table
             DatatableCounter++;
 
-            var currentClass = $(this).attr('class');
+            // element
+            let elementTable = $(this);
+
+            var currentClass = elementTable.attr('class');
             currentClass = currentClass.replace('LimitlessTable','');
 
             // create replacement
             var NewHtml = '' +
-                '<div id="DatatableFader' + DatatableCounter + '" class="DatatableFader" style="height:0px; opacity:0; overflow-y: hidden;">' +
+                '<div id="DatatableFader' + DatatableCounter + '" class="DatatableFader">' +
                 '<table id="Datatable' + DatatableCounter + '" class="display table datatable ' + currentClass + '">' +
-                $(this).html() +
+                elementTable.html() +
                 '</table>' +
                 '</div>';
 
             // transport code to html
-            $(this).replaceWith(NewHtml);
+            elementTable.replaceWith(NewHtml);
+
 
             // render setup parameter
             var counter = 0;
             var sort = [];
             var orderable = [];
             $('#Datatable' + DatatableCounter).find('th').each(function () {
+
+                let tableHeaderElement = $(this);
+                console.log(tableHeaderElement);
+
                 // define sort
-                if ($(this).attr('Sort') != undefined) {
+                if (tableHeaderElement.attr('Sort') != undefined) {
                     sort = [
-                        [counter, $(this).attr('Sort')]
+                        [counter, tableHeaderElement.attr('Sort')]
                     ];
                 }
 
                 // orderable
-                if ($(this).attr('Sortable') == "false") {
+                if (tableHeaderElement.attr('Sortable') == "false") {
                     orderable.push({
                         "orderable": false,
                         "targets": counter
@@ -60,7 +68,7 @@ function limitless_init_datatable() {
                 }
 
                 // searchable
-                if ($(this).attr('Searchable') != "true") {
+                if (tableHeaderElement.attr('Searchable') != undefined && tableHeaderElement.attr('Searchable') == "false") {
                     orderable.push({
                         "searchable": false,
                         "targets": counter
@@ -73,7 +81,7 @@ function limitless_init_datatable() {
             });
 
             // rows
-            var rows = $(this).attr('rows');
+            var rows = elementTable.attr('rows');
             if (rows == undefined) {
                 rows = 10;
             }
@@ -85,7 +93,7 @@ function limitless_init_datatable() {
                 var Complex = false;
             }
 
-            if($('table').hasClass('downloadbuttons')){
+            if(elementTable.hasClass('downloadbuttons')){
 
                 $(".dt-buttons").removeClass('hideBtn');
                 $(".dt-buttons").addClass('showBtn');

src/Views/Limitless/Datatable/Config.php

@@ -42,7 +42,8 @@
         {
             $this->assetAllocation = [
                 'Limitless::DatatableStart' => [
-                'Attachments/datatables.js',
+                'Attachments/datatables.init.js',
+                'Attachments/datatables.init.css',
                 'Attachments/jquery.datatables.js',
                 ]
             ];
@@ -74,7 +75,8 @@
         public function datatableStart($parameters)
         {
             return View('Limitless::Datatable.Start')
-                ->withExtra( ($parameters['extra'] ?? []) );
+                ->withExtra($parameters['extra'] ?? [])
+                ->withRows($parameters['rows'] ?? null);
 
         }
 

src/Views/Limitless/Datatable/Documentation/Index.blade.php

@@ -68,12 +68,12 @@
     @Limitless::DatatableStart([ 'extra' => ['class' => 'table table-striped']])
 
     <thead>
-    <th Searchable="true" Sort="asc"> Name </th>
-    <th Searchable="true"> Position </th>
-    <th Searchable="true" Sortable="true"> Office </th>
-    <th Sortable="true"> Age </th>
-    <th Sortable="true"> Start date </th>
-    <th Sortable="true"> Salary </th>
+    <th Sortable=false> Name </th>
+    <th> Position </th>
+    <th> Office </th>
+    <th> Age </th>
+    <th> Start date </th>
+    <th> Salary </th>
 
     </thead>
     <tbody>

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

@@ -9,4 +9,7 @@
       {{$k}}="{{$v}}"
 
    @endforeach
+
+   @if($rows) rows='{{ $rows }}' @endif
+
    class="table LimitlessTable" hidden>