refactorize LBdataTable - use ajax for loading data (not DataTable)

add exact data type json/array allow loading table header from json data
ufal · Nov 29, 2021 · 2a6504d · 2a6504d
1 parent 33188f2
commit 2a6504d
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 30 deletions.
diff --git a/app/public/js/lb-datatable.js b/app/public/js/lb-datatable.js
@@ -12,39 +12,67 @@ jQuery(document).ready(function (){
 function LBDataTable (table, cnt) {
   this.id = 'lb_datatable-'+cnt;
   this.data_url = table.attr("data-url");
-  this.data_header = JSON.parse(table.attr("data-header"));
+  if(table.attr("data-header")) {
+    this.data_header = JSON.parse(table.attr("data-header"));
+  } else if (table.attr("data-header-field")) {
+    this.data_header_field = table.attr("data-header-field")
+  }
   this.table = table;
   this.column_settings = table.children('script').text();
   this.data_type = table.attr("data-type");
+  if(this.data_type === undefined){ console.log('data_type is not defined, setting default json'); this.data_type = 'json';}
   this.data_field = table.attr("data-field");
+  if(this.data_field === undefined){ console.log('data_field is not defined, setting default data'); this.data_field = 'data';}
   if(table.attr("data-items")) {
     this.data_items = JSON.parse(table.attr("data-items"));
+  } else if (table.attr("data-header-field")) {
+    this.data_items_field = table.attr("data-items-field")
   }
 };
 
 
 
+
 LBDataTable.prototype.initialize = function() {
   var self = this;
   self.table.attr('id', self.id);
-  var header = jQuery('<thead></thead>');
-  var footer = jQuery('<tfoot></tfoot>');
-  var headfootrow = jQuery('<tr></tr>');
-  for(let idx in self.data_header) {
-  	headfootrow.append(jQuery('<th></th>').append(self.data_header[idx]));
-  }
-  headfootrow.clone().appendTo(header);
-  footer.append(headfootrow);
-  self.table.append(header);
-  self.table.append(footer);
+  jQuery.ajax(
+    {
+      dataType: 'json',
+      type: 'GET',
+      url: self.data_url,
+      success: function(json){
+        var header = jQuery('<thead></thead>');
+        var footer = jQuery('<tfoot></tfoot>');
+        var headfootrow = jQuery('<tr></tr>');
+        if(self.data_header === undefined){
+          self.data_header = json[self.data_header_field];
+        }
+        if(self.data_items === undefined){
+          self.data_items = json[self.data_items_field];
+        }
+        for(let idx in self.data_header) {
+           headfootrow.append(jQuery('<th></th>').append(self.data_header[idx]));
+        }
+        headfootrow.clone().appendTo(header);
+        footer.append(headfootrow);
+        self.table.append(header);
+        self.table.append(footer);
+        const array = self.prepareData(json);
+        self.table.DataTable( {
+            data: array,
+            columnDefs: eval(self.column_settings)
+          });
+    }
+  });
+};
+
+
 
-  self.table.DataTable( {
-        "ajax": {
-          "url": self.data_url,
-          ...( self.data_type
-               ? {
-                    "dataSrc": function (json) {
-                      const array = json[self.data_field].map(
+LBDataTable.prototype.prepareData = function(data) {
+  var self = this;
+  if(self.data_type == 'json'){
+    return data[self.data_field].map(
                         (row) => {
                           return self.data_items.map(
                             (item_label) => {
@@ -53,15 +81,10 @@ LBDataTable.prototype.initialize = function() {
                           )
                         }
                       );
-                      return array;
-                    }
-                 }
-               : {}
-             )
-        },
-        "columnDefs": eval(self.column_settings)
-    } );
-
-};
-
+  } else if(self.data_type == 'array') {
+    return data[self.data_field];
+  }
 
+  console.log('ERROR: unknown data type: ', self.data_type);
+  return null;
+};
diff --git a/app/views/pricing.pug b/app/views/pricing.pug
@@ -17,7 +17,7 @@ block content
                 .divider
         .row
             .col.s12
-                table(type='lb-datatable' data-url='api/pricings' data-header='["", "Service", "User", "Price", "From", "Till", "Active"]' )
+                table(type='lb-datatable' data-url='api/pricings' data-type='array' data-header='["", "Service", "User", "Price", "From", "Till", "Active"]' )
                   script.
                     [ {
                       "targets": 0,