From 8d68faf92272334830a091d68ee9d6565405047c Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Tue, 23 Apr 2024 13:06:02 +0200
Subject: [PATCH] replaces the pull-right class with a conditional if
 bootstrapVersion was set to 5

---
 .../lehre/anrechnung/adminAnrechnung.php      |   92 +-
 .../lehre/anrechnung/adminAnrechnungData.php  |    1 -
 public/js/TableWidget.js                      | 1688 +++++++++--------
 3 files changed, 899 insertions(+), 882 deletions(-)

diff --git a/application/views/lehre/anrechnung/adminAnrechnung.php b/application/views/lehre/anrechnung/adminAnrechnung.php
index 75cd94b42..5c911d388 100644
--- a/application/views/lehre/anrechnung/adminAnrechnung.php
+++ b/application/views/lehre/anrechnung/adminAnrechnung.php
@@ -9,7 +9,7 @@ $includesArray = array(
     'dialoglib' => true,
     'tabulator5' => true,
     'tabulator5JQuery' => true,
-    'cis'=>true,
+    'cis' => true,
     'tablewidget' => true,
     'sbadmintemplate3' => true,
     'navigationwidget' => true,
@@ -72,12 +72,12 @@ $this->load->view('templates/FHC-Header', $includesArray);
 
             <!--Untertitel-->
             <h4 class="my-4"><?php echo $this->p->t('anrechnung', 'anrechnungszeitraumFestlegen'); ?></h4>
-            
-            
-            <button class="btn btn-primary azrOpenModal" data-bs-toggle="modal" data-bs-target="#azrModal"  >
+
+
+            <button class="btn btn-primary azrOpenModal" data-bs-toggle="modal" data-bs-target="#azrModal">
                 <i class="fa fa-plus"></i> <?php echo $this->p->t('anrechnung', 'anrechnungszeitraumHinzufuegen'); ?>
             </button>
-              
+
 
             <!-- Tabelle -->
             <div class="row">
@@ -87,53 +87,55 @@ $this->load->view('templates/FHC-Header', $includesArray);
             </div>
 
             <!-- Modal (für insert und update von Anrechnungszeitraum)-->
-            <div class="modal fade" id="azrModal" tabindex="-1" role="dialog" aria-labelledby="azrModalLabel" aria-hidden="true">
-            <div class="modal-dialog" role="document">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title" id="azrModalLabel"></h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
-                    </div>
-                    <div class="modal-body my-4">
-                        <div class="row">
-                            <input type="hidden" id="anrechnungszeitraum_id" value="">
-                            <input type="hidden" id="defaultStudiensemester_kurzbz" value="<?php echo $studiensemester_kurzbz ?>">
-                            <div class="col-4">
-                                <label for="studiensemester" class="fw-bold small">Studiensemester</label>
-                                <?php
-                                echo $this->widgetlib->widget(
-                                    'Studiensemester_widget',
-                                    array(
-                                        DropdownWidget::SELECTED_ELEMENT => $studiensemester_kurzbz
-                                    ),
-                                    array(
-                                        'name' => 'studiensemester',
-                                        'id' => 'studiensemester',
-                                        'class'=>'form-select w-auto ',
-                                    )
-                                );
-                                ?>
-                            </div>
-                            <div class="col-4">
-                                <label for="azrStart" class="fw-bold small">Anr.-Zeitraum Start</label>
-                                <input type="date" id="azrStart" value="" class="form-control" required>
-                            </div>
-                            <div class="col-4">
-                                <label for="azrEnde" class="fw-bold small">Anr.-Zeitraum Ende</label>
-                                <input type="date" id="azrEnde" value="" class="form-control" required>
+            <div class="modal fade" id="azrModal" tabindex="-1" role="dialog" aria-labelledby="azrModalLabel"
+                aria-hidden="true">
+                <div class="modal-dialog" role="document">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="azrModalLabel"></h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body my-4">
+                            <div class="row">
+                                <input type="hidden" id="anrechnungszeitraum_id" value="">
+                                <input type="hidden" id="defaultStudiensemester_kurzbz"
+                                    value="<?php echo $studiensemester_kurzbz ?>">
+                                <div class="col-4">
+                                    <label for="studiensemester" class="fw-bold small">Studiensemester</label>
+                                    <?php
+                                    echo $this->widgetlib->widget(
+                                        'Studiensemester_widget',
+                                        array(
+                                            DropdownWidget::SELECTED_ELEMENT => $studiensemester_kurzbz
+                                        ),
+                                        array(
+                                            'name' => 'studiensemester',
+                                            'id' => 'studiensemester',
+                                            'class' => 'form-select w-auto ',
+                                        )
+                                    );
+                                    ?>
+                                </div>
+                                <div class="col-4">
+                                    <label for="azrStart" class="fw-bold small">Anr.-Zeitraum Start</label>
+                                    <input type="date" id="azrStart" value="" class="form-control" required>
+                                </div>
+                                <div class="col-4">
+                                    <label for="azrEnde" class="fw-bold small">Anr.-Zeitraum Ende</label>
+                                    <input type="date" id="azrEnde" value="" class="form-control" required>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button" id="azrInsertBtn" class="btn btn-primary" value=""><?php echo $this->p->t('ui', 'speichern'); ?></button>
+                        <div class="modal-footer">
+                            <button type="button" id="azrInsertBtn" class="btn btn-primary"
+                                value=""><?php echo $this->p->t('ui', 'speichern'); ?></button>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
 
         </div>
     </div>
 </div>
 
-<?php $this->load->view('templates/FHC-Footer', $includesArray); ?>
-
+<?php $this->load->view('templates/FHC-Footer', $includesArray); ?>
\ No newline at end of file
diff --git a/application/views/lehre/anrechnung/adminAnrechnungData.php b/application/views/lehre/anrechnung/adminAnrechnungData.php
index a813f9a5c..17e44af71 100644
--- a/application/views/lehre/anrechnung/adminAnrechnungData.php
+++ b/application/views/lehre/anrechnung/adminAnrechnungData.php
@@ -8,7 +8,6 @@ $query = '
 
 $filterWidgetArray = array(
 	'query' => $query,
-	'bootstrapVersion' => 5,
 	'tableUniqueId' => 'adminAnrechnung',
 	'requiredPermissions' => 'lehre/anrechnungszeitfenster',
 	'datasetRepresentation' => 'tabulator',
diff --git a/public/js/TableWidget.js b/public/js/TableWidget.js
index 69b7d79cf..3fdc34799 100644
--- a/public/js/TableWidget.js
+++ b/public/js/TableWidget.js
@@ -14,761 +14,754 @@ const DATASET_REP_TABULATOR = "tabulator";
  * FHC_TableWidget this object is used to render the GUI of a table widget and to operate with it
  */
 var FHC_TableWidget = {
-
-	//------------------------------------------------------------------------------------------------------------------
-	// Properties
-
-	_datasetRepresentation: null, // contains the current data representation
-
-	_bootstrapVersion:3,
-	//------------------------------------------------------------------------------------------------------------------
-	// Public methods
-
-	/**
-	 * To display the TableWidget using the loaded data prenset in the session
-	 */
-	display: function() {
-
-		FHC_TableWidget._getTables(FHC_TableWidget._renderTableWidget);
-	},
-
-	/**
-	 * Alias call to method display only to inprove the readability of the code
-	 */
-	refresh: function() {
-
-		FHC_TableWidget.display();
-	},
-
-	//------------------------------------------------------------------------------------------------------------------
-	// Private methods
-
-	/**
-	 * To retrive the page where the TableWidget is used, using the FHC_JS_DATA_STORAGE_OBJECT
-	 */
-	_getTableUniqueIdPrefix: function() {
-
-		return FHC_JS_DATA_STORAGE_OBJECT.called_path + "/" + FHC_JS_DATA_STORAGE_OBJECT.called_method;
-	},
-
-	/**
-	 * Utility method that checks if data contains an error and print that to the console
-	 * otherwise the TableWidget GUI is refreshed
-	 */
-	_failOrRefresh: function(data, textStatus, jqXHR) {
-
-		if (FHC_AjaxClient.isError(data))
-		{
-			console.log(FHC_AjaxClient.getError(data));
-		}
-		else
-		{
-			FHC_TableWidget.refresh();
-		}
-	},
-
-	/**
-	 * Utility method that checks if data contains an error and print that to the console
-	 * otherwise the page is reloaded
-	 */
-	_failOrReload: function(data, textStatus, jqXHR) {
-
-		if (FHC_AjaxClient.isError(data))
-		{
-			console.log(FHC_AjaxClient.getError(data));
-		}
-		else
-		{
-			location.reload();
-		}
-	},
-
-	/**
-	 * To reset the Table Widget GUI
-	 */
-	_resetGUI: function(tableWidgetDiv) {
-
-		// If the choosen dataset representation is tablesorter
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER)
-		{
-			tableWidgetDiv.find("#tableWidgetTableDataset > thead > tr").html("");
-			tableWidgetDiv.find("#tableWidgetTableDataset > tbody").html("");
-		}
-
-		// If the choosen dataset representation is pivotUI
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_PIVOTUI)
-		{
-			tableWidgetDiv.find("#tableWidgetPivotUI").html("");
-		}
-
-		// If the choosen dataset representation is tabulator
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR)
-		{
-			tableWidgetDiv.find("#tableWidgetTabulator").html("");
-		}
-	},
-
-	/**
-	 * To get via Ajax all the data related to the TableWidget present in the given page
-	 * If the parameter renderFunction is a valid function, is called on success
-	 */
-	_getTables: function(renderFunction) {
-
-		var tableWidgetUniqueIdArray = FHC_TableWidget._getTableWidgetUniqueIdArray();
-
-		for (var tableWidgetsCounter = 0; tableWidgetsCounter < tableWidgetUniqueIdArray.length; tableWidgetsCounter++)
-		{
-			FHC_AjaxClient.ajaxCallGet(
-				"widgets/Tables/getTable",
-				{
-					tableUniqueId: FHC_TableWidget._getTableUniqueIdPrefix() + "/" + tableWidgetUniqueIdArray[tableWidgetsCounter]
-				},
-				{
-					successCallback: function(data, textStatus, jqXHR) {
-
-						if (FHC_AjaxClient.hasData(data))
-						{
-							if (typeof renderFunction == "function")
-							{
-								renderFunction(FHC_AjaxClient.getData(data));
-							}
-						}
-						else
-						{
-							console.log(FHC_AjaxClient.getError(data));
-						}
-					}
-				}
-			);
-		}
-	},
-
-	/**
-	 * This method calls all the other methods needed to rendere the GUI for a TableWidget
-	 * The parameter data contains all the data about the TableWidget and it is given as parameter
-	 * to all the methods that here are called
-	 * NOTE: think very carefully before changing the order of the calls
-	 */
-	_renderTableWidget: function(data) {
-
-		FHC_TableWidget._setDatasetRepresentation(data); // set what type of dataset representation was choosen
-
-		FHC_TableWidget._setBootstrapVersion(data); // set the bootstrap version used for the tableWidget
-
-		var tableWidgetDiv = $('div[tableUniqueId="' + data.tableUniqueId + '"]');
-
-		FHC_TableWidget._turnOffEvents(tableWidgetDiv); // turns all the events off
-
-		FHC_TableWidget._resetGUI(tableWidgetDiv); // Reset the entire GUI
-
-		FHC_TableWidget._renderDataset(tableWidgetDiv, data);
-
-		FHC_TableWidget._turnOnEvents(tableWidgetDiv); // turns all the events off
-
-		FHC_TableWidget._onTableBuilt(tableWidgetDiv, data);
-		
-	},
-
-
-	_onTableBuilt: function(tableWidgetDiv, data) {
-		var options = FHC_TableWidget._getRepresentationOptions(data);
-
-		tableWidgetDiv.find("#tableWidgetTabulator").tabulator("on","tableBuilt",()=>{
-
-			if (typeof options.tableWidgetHeader == 'undefined' ||
-			(typeof options.tableWidgetHeader != 'undefined' && options.tableWidgetHeader != false))
-			{
-				// renders the table headers
-				var tabulatorHeaderCollapseHTML = _renderTabulatorHeaderCollapseHTML(tableWidgetDiv);
-				tableWidgetDiv.find('#tableWidgetHeader').after(tabulatorHeaderCollapseHTML);	
-			}
-			
-			
-			// makes the table headers toggle visibility when clicking on them
-			tableWidgetDiv.find('.btn-select-col').on('click', function()
-			{
-				var selected = this.value;
-				
-				tableWidgetDiv.find("#tableWidgetTabulator").tabulator('toggleColumn', selected);
-
-				// toggle class to color button as selected / deselected
-				$(this).toggleClass('btn-select-col-selected').blur();	// blur removes automatic focus
-			})
-
-				
-			
-		
-			
-
-		})
-	},
-
-	/**
-	 * Turns all the events off
-	 * NOTE: must be aligned to _turnOnEvents
-	 */
-	_turnOffEvents: function(tableWidgetDiv) {
-
-		// If the choosen dataset representation is tablesorter
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER)
-		{
-			FHC_TableWidget._disableTablesorter(tableWidgetDiv); // disable the tablesorter
-		}
-	},
-
-	/**
-	 * Turns all the events on
-	 * NOTE: must be aligned to _turnOffEvents
-	 */
-	_turnOnEvents: function(tableWidgetDiv) {
-
-		var tableUniqueId = tableWidgetDiv.attr('tableUniqueId');
-
-		// If the choosen dataset representation is tablesorter
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER)
-		{
-			FHC_TableWidget._enableTableSorter(tableWidgetDiv); // enable the tablesorter
-		}
-
-		// If the choosen dataset representation is tabulator
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR)
-		{
-			// ---------------------------------------------------------------------------------------------------------
-			// Add events to the elements
-			// ---------------------------------------------------------------------------------------------------------
-
-			// Click-Event to download csv
-			tableWidgetDiv.find('#download-csv').on('click', function()
-			{
-				// BOM for correct UTF-8 char output
-				tableWidgetDiv.find("#tableWidgetTabulator").tabulator("download", "csv", "data.csv", {bom:true});
-			})
-
-			// Click-Event to toggle the collapsable help panel
-			tableWidgetDiv.find('#help').on('click', function()
-			{
-				// Hide the collapsable settings panel, if it actually shown
-				$('#tabulatorSettings-' + tableUniqueId).collapse('hide');
-
-				// Toggle the collapsable help panel
-				$('#tabulatorHelp-' + tableUniqueId).collapse('toggle');
-			})
-
-			// Click-Event to toggle the collapsable settings panel
-			tableWidgetDiv.find('#settings').on('click', function()
-			{
-				// Hide the collapsable help panel, if it actually shown
-				$('#tabulatorHelp-' + tableUniqueId).collapse('hide');
-
-				// Toggle the collapsable settings panel
-				$('#tabulatorSettings-' + tableUniqueId).collapse('toggle');
-			})
-
-			/* Beautify button group behaviour
-			 * Let buttons stay active even until they are clicked again to close the collapsable help- oder setting panels
-			 * Also remove the disturbing button focus behaviour
-			 */
-			$(".btn-group > .btn").click(function(){
-				if ($(this).hasClass("active"))
-				{
-					$(this).removeClass('active').css('outline', 'none');
-				}
-				else
-				{
-					$(this).addClass("active").css('outline', 'none').siblings().removeClass("active");
-				}
-			});
-
-			/**
-			 * Click-Event to select all rows
-			 * Default is ALL rows. This can be modified via hook tableWidgetHook_selectAllButton.
- 			 */
-			if (typeof tableWidgetHook_selectAllButton == 'function')
-			{
-				tableWidgetDiv.find('#select-all').on('click', function() {
-					tableWidgetHook_selectAllButton(tableWidgetDiv);
-				});
-			}
-			else
-			{
-				tableWidgetDiv.find('#select-all').on('click', function() {
-					tableWidgetDiv.find("#tableWidgetTabulator").tabulator('selectRow', true);
-				});
-			}
-
-			// Click-Event to deselect all rows
-			tableWidgetDiv.find('#deselect-all').on('click', function()
-			{
-				tableWidgetDiv.find("#tableWidgetTabulator").tabulator('deselectRow');
-			})
-
-			// Click-Event to toggle column-picker columns
-			//! this event was moved to the _onTableBuilt function
-			
-		}
-	},
-
-	_renderDataset: function(tableWidgetDiv, data) {
-
-		// If the choosen dataset representation is tablesorter then...
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER)
-		{
-			FHC_TableWidget._renderDatasetTablesorter(tableWidgetDiv, data); // ...render the tablesorter GUI
-		}
-
-		// If the choosen dataset representation is pivotUI then...
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_PIVOTUI)
-		{
-			FHC_TableWidget._renderDatasetPivotUI(tableWidgetDiv, data); // ...render the pivotUI GUI
-		}
-
-		// If the choosen dataset representation is tabulator then...
-		if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR)
-		{
-			FHC_TableWidget._renderDatasetTabulator(tableWidgetDiv, data); // ...render the tabulator GUI
-		}
-
-		
-	},
-
-	/**
-	 * Renders the tablesorter for the TableWidget
-	 * The data to be displayed are retrived from the parameter data
-	 */
-	_renderDatasetTablesorter: function(tableWidgetDiv, data) {
-
-		if (data.hasOwnProperty("checkboxes") && data.checkboxes != null && data.checkboxes.trim() != "")
-		{
-			tableWidgetDiv.find("#tableWidgetTableDataset > thead > tr").append("<th data-filter='false' title='Select'>Select</th>");
-		}
-
-		var arrayFieldsToDisplay = FHC_TableWidget._getFieldsToDisplay(data);
-
-		for (var i = 0; i < arrayFieldsToDisplay.length; i++)
-		{
-			var columnName = arrayFieldsToDisplay[i];
-
-			tableWidgetDiv.find("#tableWidgetTableDataset > thead > tr").append("<th title='" + columnName + "'>" + columnName + "</th>");
-		}
-
-		if (data.hasOwnProperty("additionalColumns") && $.isArray(data.additionalColumns))
-		{
-			for (var i = 0; i < data.additionalColumns.length; i++)
-			{
-				var columnName = data.additionalColumns[i];
-
-				tableWidgetDiv.find("#tableWidgetTableDataset > thead > tr").append("<th title='" + columnName + "'>" + columnName + "</th>");
-			}
-		}
-
-		if (arrayFieldsToDisplay.length > 0)
-		{
-			if (data.hasOwnProperty("dataset") && $.isArray(data.dataset))
-			{
-				if (data.checkboxes != null && data.checkboxes != "")
-				{
-					// select checkbox range with shift key
-					if (typeof tableWidgetDiv.find("#tableWidgetTableDataset").checkboxes === 'function')
-						tableWidgetDiv.find("#tableWidgetTableDataset").checkboxes("range", true);
-				}
-				if (data.dataset.length == 0)
-				{
-					// Display placeholder if Table is empty
-					var numColumns = arrayFieldsToDisplay.length;
-					if (data.hasOwnProperty("additionalColumns") && $.isArray(data.additionalColumns))
-					{
-						numColumns += data.additionalColumns.length;
-					}
-					var strHtml = '<tr><td align="center" colspan="'+numColumns+'">';
-					strHtml += FHC_PhrasesLib.t('ui', 'keineDatenVorhanden');
-					strHtml += '</td></tr>';
-					tableWidgetDiv.find("#tableWidgetTableDataset > tbody").append(strHtml);
-				}
-				else
-				{
-					for (var i = 0; i < data.dataset.length; i++)
-					{
-						var record = data.dataset[i];
-
-						if ($.isEmptyObject(record))
-						{
-							continue;
-						}
-
-						var strHtml = "<tr class='" + record.MARK_ROW_CLASS + "'>";
-
-						if (data.checkboxes != null && data.checkboxes != "")
-						{
-							strHtml += "<td>";
-							strHtml += "<input type='checkbox' name='" + data.checkboxes + "[]' value='" + record[data.checkboxes] + "'>";
-							strHtml += "</td>";
-						}
-
-						$.each(arrayFieldsToDisplay, function(i, fieldToDisplay) {
-
-							if (record.hasOwnProperty(data.fields[i]))
-							{
-								strHtml += "<td>" + record[data.fields[i]] + "</td>";
-							}
-						});
-
-						if (data.additionalColumns != null && $.isArray(data.additionalColumns))
-						{
-							$.each(data.additionalColumns, function(i, additionalColumn) {
-
-								if (record.hasOwnProperty(additionalColumn))
-								{
-									strHtml += "<td>" + record[additionalColumn] + "</td>";
-								}
-							});
-						}
-
-						strHtml += "</tr>";
-
-						tableWidgetDiv.find("#tableWidgetTableDataset > tbody").append(strHtml);
-					}
-				}
-			}
-		}
-	},
-
-	/**
-	 * Enable the tablesorter libs to render the dataset table with sorting features
-	 */
-	_enableTableSorter: function(tableWidgetDiv) {
-
-		var tableWidgetTablesorter = tableWidgetDiv.find("#tableWidgetTableDataset");
-
-		// Checks if the table contains data (rows)
-		if (tableWidgetTablesorter.find("tbody:empty").length == 0
-			&& tableWidgetTablesorter.find("tr:empty").length == 0
-			&& tableWidgetTablesorter.hasClass("table-condensed"))
-		{
-			tableWidgetTablesorter.tablesorter({
-				dateFormat: "ddmmyyyy",
-				widgets: ["zebra", "filter"],
-				widgetOptions: {
-					filter_saveFilters : true
-				}
-			});
-
-			$.tablesorter.updateAll(tableWidgetTablesorter[0].config, true, null);
-		}
-	},
-
-	/**
-	 * Disable the tablesorter
-	 */
-	_disableTablesorter: function(tableWidgetDiv) {
-
-		tableWidgetDiv.find("#tableWidgetTableDataset").trigger("disable");
-	},
-
-	/**
-	 * Renders the pivotUI for the TableWidget
-	 * The data to be displayed are retrived from the parameter data
-	 */
-	_renderDatasetPivotUI: function(tableWidgetDiv, data) {
-
-		// Checks if options were given and returns them
-		var options = FHC_TableWidget._getRepresentationOptions(data);
-
-		// Manipulation for the representation!
-		var arrayFieldsToDisplay = FHC_TableWidget._getFieldsToDisplay(data);
-
-		// If there are fields to be displayed...
-		if (arrayFieldsToDisplay.length > 0)
-		{
-			// ...if there are data to be displayed...
-			if (data.hasOwnProperty("dataset") && $.isArray(data.dataset))
-			{
-				// Build the array of objects used by pivotUI and store it in pivotUIData
-				var pivotUIData = [];
-
-				// Loops through data
-				for (var i = 0; i < data.dataset.length; i++)
-				{
-					var record = data.dataset[i]; // Single record
-					var tmpObj = {}; // New object that represents a record
-
-					// Loops through columns of a record
-					$.each(arrayFieldsToDisplay, function(i, fieldToDisplay) {
-
-						if (record.hasOwnProperty(data.fields[i]))
-						{
-							tmpObj[fieldToDisplay] = record[data.fields[i]]; // Add data with the column alias
-						}
-					});
-
-					// If additional columns are present...
-					if (data.additionalColumns != null && $.isArray(data.additionalColumns))
-					{
-						// ...loops through them
-						$.each(data.additionalColumns, function(i, additionalColumn) {
-
-							if (record.hasOwnProperty(additionalColumn))
-							{
-								tmpObj[additionalColumn] = record[additionalColumn]; // Add the additional column
-							}
-						});
-					}
-
-					pivotUIData.push(tmpObj); // Add tmpObj to pivotUIData
-				}
-
-				// Renders the pivotUI
-				tableWidgetDiv.find("#tableWidgetPivotUI").pivotUI(
-		            pivotUIData,
-					options
-		        );
-			}
-		}
-	},
-
-	/**
-	 * Retrives the fields to be displayed from the data parameter, if aliases are present then they are used
-	 */
-	_getFieldsToDisplay: function(data) {
-
-		var arrayFieldsToDisplay = [];
-
-		if (data.hasOwnProperty("fields") && $.isArray(data.fields))
-		{
-			if (data.hasOwnProperty("columnsAliases") && $.isArray(data.columnsAliases))
-			{
-				for (var sfc = 0; sfc < data.fields.length; sfc++)
-				{
-					for (var fc = 0; fc < data.fields.length; fc++)
-					{
-						if (data.fields[sfc] == data.fields[fc])
-						{
-							arrayFieldsToDisplay[sfc] = data.columnsAliases[fc];
-						}
-					}
-				}
-			}
-			else
-			{
-				arrayFieldsToDisplay = data.fields;
-			}
-		}
-
-		return arrayFieldsToDisplay;
-	},
-
-	/**
-	 * Renders the tabulator for the TableWidget
-	 * The data to be displayed are retrived from the parameter data
-	 */
-	_renderDatasetTabulator: function(tableWidgetDiv, data) {
-		
-		// Checks if options were given and returns them
-		var options = FHC_TableWidget._getRepresentationOptions(data);
-		// Checks if record fields definitions were given and returns them
-		var recordFieldsDefinitions = FHC_TableWidget._getRepresentationFieldsDefinitions(data);
-
-		// Manipulation for the representation!
-		var arrayTabulatorColumns = FHC_TableWidget._getTabulatorColumns(data, recordFieldsDefinitions);
-
-		if (arrayTabulatorColumns.length > 0)
-		{
-			// ...if there are data to be displayed...
-			if (data.hasOwnProperty("dataset") && $.isArray(data.dataset))
-			{
-				if (options == null) options = {};
-				options.columnDefaults={
-					// set header tooltip with column title
-					//! the old keyword is tooltipsHeader, the new keyword for the option is headerTooltip
-					headerTooltip: (typeof options.columnDefaults?.tooltipsHeader == 'undefined') ? true : options.columnDefaults?.tooltipsHeader
-				}
-				options.columns = arrayTabulatorColumns;
-				options.data = data.dataset;
-                options.persistence = (typeof options.persistence == 'undefined') ? true : options.persistence;			// enables persistence (default store in localStorage if available, else in cookie)
-                options.persistenceID = (typeof options.persistenceID == 'undefined') ?  data.tableUniqueId : options.persistenceID;  // persistenceID to store persistence data seperately for multiple tables
-				options.movableColumns = (typeof options.movableColumns == 'undefined') ? true : options.movableColumns;				// allows changing column order
-				
-				options.placeholder = _func_placeholder();	// display text when table is empty
-
-				// Renders the tabulator
-				tableWidgetDiv.find("#tableWidgetTabulator").tabulator(options);
-
-				//! callbacks that need to be attached after the table has built in tabulator version 5+
-				tableWidgetDiv.find("#tableWidgetTabulator").tabulator("on","rowSelectionChanged",_func_rowSelectionChanged);
-				tableWidgetDiv.find("#tableWidgetTabulator").tabulator("on","columnVisibilityChanged",_func_columnVisibilityChanged);
-				
-			}
-		}
-
-		// -------------------------------------------------------------------------------------------------------------
-		// Render TableWidget Header and -Footer
-		// -------------------------------------------------------------------------------------------------------------
-
-		// Render tableWidgetHeader
-		
-			
-			if (typeof options.tableWidgetHeader == 'undefined' ||
-			(typeof options.tableWidgetHeader != 'undefined' && options.tableWidgetHeader != false))
-			{
-				var tabulatorHeaderHTML = _renderTabulatorHeaderHTML(tableWidgetDiv);
-				tableWidgetDiv.find('#tableWidgetHeader').append(tabulatorHeaderHTML);
-
-
-				
-			}
-		
-		
-
-		/**
-		 * 	tableWidgetFooter is NOT rendered by default.
-		 * 	tableWidgetFooter is rendered, if tableWidgetFooter is set in tabulators datasetRepOptions.
-		 *	Setup options like this:
-		 *  tableWidgetFooter: {
-		 *  	selectButtons: true  // tableWidgetFooter properties are checked in _renderTabulatorFooterHTML function
-		 *  }
- 		 */
-		if (typeof options.tableWidgetFooter != 'undefined' && options.tableWidgetFooter != null)
-		{
-			var tabulatorFooterHTML = _renderTabulatorFooterHTML(options.tableWidgetFooter);
-			tableWidgetDiv.find('#tableWidgetFooter').append(tabulatorFooterHTML);
-		}
-	},
-
-	/**
-	 * Retrives the fields to be displayed from the data parameter, if aliases are present then they are used
-	 */
-	_getTabulatorColumns: function(data, recordFieldsDefinitions) {
-
-		var fieldsToDisplayTabulator = [];
-
-		if (data.hasOwnProperty("fields") && $.isArray(data.fields))
-		{
-			for (var sfc = 0; sfc < data.fields.length; sfc++)
-			{
-				for (var fc = 0; fc < data.fields.length; fc++)
-				{
-					if (data.fields[sfc] == data.fields[fc])
-					{
-						// Build the array of objects (columns) used by tabulator and store it in tabulatorColumns
-						var tmpColumnObj = {}; // New object that represents a column
-
-						// If was given a definition for this field then use it!
-						if (recordFieldsDefinitions != null && recordFieldsDefinitions.hasOwnProperty(data.fields[sfc]))
-						{
-							tmpColumnObj = recordFieldsDefinitions[data.fields[sfc]];
-						}
-
-						tmpColumnObj.field = data.fields[sfc]; // Field name to be linked with dataset field name
-
-						// If there is an alias for this field use it to give a title to this field (header)
-						if (data.hasOwnProperty("columnsAliases") && $.isArray(data.columnsAliases))
-						{
-							tmpColumnObj.title = data.columnsAliases[fc];
-						}
-						else // otherwise use the field name itself
-						{
-							tmpColumnObj.title = data.fields[sfc];
-						}
-
-						fieldsToDisplayTabulator.push(tmpColumnObj); // Add tmpColumnObj to tabulatorColumns
-					}
-				}
-			}
-		}
-
-		// If additional columns are present...
-		if (data.hasOwnProperty("additionalColumns") && data.additionalColumns != null && $.isArray(data.additionalColumns))
-		{
-			// ...loops through them
-			$.each(data.additionalColumns, function(i, additionalColumn) {
-
-				var tmpColumnObj = {}; // New object that represents a column
-
-				// If was given a definition for this field then use it!
-				if (recordFieldsDefinitions != null && recordFieldsDefinitions.hasOwnProperty(additionalColumn))
-				{
-					tmpColumnObj = recordFieldsDefinitions[additionalColumn];
-				}
-
-				tmpColumnObj.title = additionalColumn; // Give a title to this field (header)
-				tmpColumnObj.field = additionalColumn; // Field name to be linked with dataset field name
-
-				fieldsToDisplayTabulator.push(tmpColumnObj); // Add tmpColumnObj to tabulatorColumns
-			});
-		}
-
-		return fieldsToDisplayTabulator;
-	},
-
-	/**
-	 * Gets options for the representation
-	 */
-	_getRepresentationOptions: function(data) {
-
-		var options = {}; // eventually contains options fot the representation
-		
-		// Checks if options were given
-		if (data.hasOwnProperty("datasetRepresentationOptions") && data.datasetRepresentationOptions != "")
-		{
-			var tmpOptions = eval("(" + data.datasetRepresentationOptions + ")"); // and converts them from string to javascript code
-
-			// If it is an object then can be used
-			if (typeof tmpOptions == "object")
-			{
-				options = tmpOptions;
-			}
-		}
-		
-		return options;
-	},
-
-	/**
-	 * Gets record fields definitions to represent the dataset
-	 */
-	_getRepresentationFieldsDefinitions: function(data) {
-
-		var fieldsDefinitions = {}; // eventually contains record fields definitions
-		// Checks if record fields definitions was given as parameter
-		if (data.hasOwnProperty("datasetRepresentationFieldsDefinitions") && data.datasetRepresentationFieldsDefinitions != "")
-		{
-			var tmpFDefs = eval("(" + data.datasetRepresentationFieldsDefinitions + ")"); // and converts them from string to javascript code
-
-			// If it is an object then can be used
-			if (typeof tmpFDefs == "object")
-			{
-				fieldsDefinitions = tmpFDefs;
-			}
-		}
-
-		return fieldsDefinitions;
-	},
-
-	/**
-	 * Set what type of dataset representation was choosen
-	 */
-	_setDatasetRepresentation: function(data) {
-
-		if (data.hasOwnProperty("datasetRepresentation"))
-		{
-			FHC_TableWidget._datasetRepresentation = data.datasetRepresentation;
-		}
-	},
-
-	_setBootstrapVersion: function(data) {
-
-		_bootstrapVersion = data.bootstrapVersion
-	},
-
-	_getTableWidgetUniqueIdArray: function() {
-
-		var tableWidgetUniqueIdArray = [];
-
-		$("div[id*='divTableWidgetDataset']").each(function(i, e) {
-
-			tableWidgetUniqueIdArray.push(e.attributes["tableUniqueId"].nodeValue);
-		});
-
-		return tableWidgetUniqueIdArray;
-	}
+  //------------------------------------------------------------------------------------------------------------------
+  // Properties
+
+  _datasetRepresentation: null, // contains the current data representation
+
+  _bootstrapVersion: 3,
+  //------------------------------------------------------------------------------------------------------------------
+  // Public methods
+
+  /**
+   * To display the TableWidget using the loaded data prenset in the session
+   */
+  display: function () {
+    FHC_TableWidget._getTables(FHC_TableWidget._renderTableWidget);
+  },
+
+  /**
+   * Alias call to method display only to inprove the readability of the code
+   */
+  refresh: function () {
+    FHC_TableWidget.display();
+  },
+
+  //------------------------------------------------------------------------------------------------------------------
+  // Private methods
+
+  /**
+   * To retrive the page where the TableWidget is used, using the FHC_JS_DATA_STORAGE_OBJECT
+   */
+  _getTableUniqueIdPrefix: function () {
+    return (
+      FHC_JS_DATA_STORAGE_OBJECT.called_path +
+      "/" +
+      FHC_JS_DATA_STORAGE_OBJECT.called_method
+    );
+  },
+
+  /**
+   * Utility method that checks if data contains an error and print that to the console
+   * otherwise the TableWidget GUI is refreshed
+   */
+  _failOrRefresh: function (data, textStatus, jqXHR) {
+    if (FHC_AjaxClient.isError(data)) {
+      console.log(FHC_AjaxClient.getError(data));
+    } else {
+      FHC_TableWidget.refresh();
+    }
+  },
+
+  /**
+   * Utility method that checks if data contains an error and print that to the console
+   * otherwise the page is reloaded
+   */
+  _failOrReload: function (data, textStatus, jqXHR) {
+    if (FHC_AjaxClient.isError(data)) {
+      console.log(FHC_AjaxClient.getError(data));
+    } else {
+      location.reload();
+    }
+  },
+
+  /**
+   * To reset the Table Widget GUI
+   */
+  _resetGUI: function (tableWidgetDiv) {
+    // If the choosen dataset representation is tablesorter
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) {
+      tableWidgetDiv.find("#tableWidgetTableDataset > thead > tr").html("");
+      tableWidgetDiv.find("#tableWidgetTableDataset > tbody").html("");
+    }
+
+    // If the choosen dataset representation is pivotUI
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_PIVOTUI) {
+      tableWidgetDiv.find("#tableWidgetPivotUI").html("");
+    }
+
+    // If the choosen dataset representation is tabulator
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR) {
+      tableWidgetDiv.find("#tableWidgetTabulator").html("");
+    }
+  },
+
+  /**
+   * To get via Ajax all the data related to the TableWidget present in the given page
+   * If the parameter renderFunction is a valid function, is called on success
+   */
+  _getTables: function (renderFunction) {
+    var tableWidgetUniqueIdArray =
+      FHC_TableWidget._getTableWidgetUniqueIdArray();
+
+    for (
+      var tableWidgetsCounter = 0;
+      tableWidgetsCounter < tableWidgetUniqueIdArray.length;
+      tableWidgetsCounter++
+    ) {
+      FHC_AjaxClient.ajaxCallGet(
+        "widgets/Tables/getTable",
+        {
+          tableUniqueId:
+            FHC_TableWidget._getTableUniqueIdPrefix() +
+            "/" +
+            tableWidgetUniqueIdArray[tableWidgetsCounter],
+        },
+        {
+          successCallback: function (data, textStatus, jqXHR) {
+            if (FHC_AjaxClient.hasData(data)) {
+              if (typeof renderFunction == "function") {
+                renderFunction(FHC_AjaxClient.getData(data));
+              }
+            } else {
+              console.log(FHC_AjaxClient.getError(data));
+            }
+          },
+        }
+      );
+    }
+  },
+
+  /**
+   * This method calls all the other methods needed to rendere the GUI for a TableWidget
+   * The parameter data contains all the data about the TableWidget and it is given as parameter
+   * to all the methods that here are called
+   * NOTE: think very carefully before changing the order of the calls
+   */
+  _renderTableWidget: function (data) {
+    FHC_TableWidget._setDatasetRepresentation(data); // set what type of dataset representation was choosen
+
+    FHC_TableWidget._setBootstrapVersion(data); // set the bootstrap version used for the tableWidget
+
+    var tableWidgetDiv = $('div[tableUniqueId="' + data.tableUniqueId + '"]');
+
+    FHC_TableWidget._turnOffEvents(tableWidgetDiv); // turns all the events off
+
+    FHC_TableWidget._resetGUI(tableWidgetDiv); // Reset the entire GUI
+
+    FHC_TableWidget._renderDataset(tableWidgetDiv, data);
+
+    FHC_TableWidget._turnOnEvents(tableWidgetDiv); // turns all the events off
+
+    FHC_TableWidget._onTableBuilt(tableWidgetDiv, data);
+  },
+
+  _onTableBuilt: function (tableWidgetDiv, data) {
+    var options = FHC_TableWidget._getRepresentationOptions(data);
+
+    tableWidgetDiv
+      .find("#tableWidgetTabulator")
+      .tabulator("on", "tableBuilt", () => {
+        if (
+          typeof options.tableWidgetHeader == "undefined" ||
+          (typeof options.tableWidgetHeader != "undefined" &&
+            options.tableWidgetHeader != false)
+        ) {
+          // renders the table headers
+          var tabulatorHeaderCollapseHTML =
+            _renderTabulatorHeaderCollapseHTML(tableWidgetDiv);
+          tableWidgetDiv
+            .find("#tableWidgetHeader")
+            .after(tabulatorHeaderCollapseHTML);
+        }
+
+        // makes the table headers toggle visibility when clicking on them
+        tableWidgetDiv.find(".btn-select-col").on("click", function () {
+          var selected = this.value;
+
+          tableWidgetDiv
+            .find("#tableWidgetTabulator")
+            .tabulator("toggleColumn", selected);
+
+          // toggle class to color button as selected / deselected
+          $(this).toggleClass("btn-select-col-selected").blur(); // blur removes automatic focus
+        });
+      });
+  },
+
+  /**
+   * Turns all the events off
+   * NOTE: must be aligned to _turnOnEvents
+   */
+  _turnOffEvents: function (tableWidgetDiv) {
+    // If the choosen dataset representation is tablesorter
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) {
+      FHC_TableWidget._disableTablesorter(tableWidgetDiv); // disable the tablesorter
+    }
+  },
+
+  /**
+   * Turns all the events on
+   * NOTE: must be aligned to _turnOffEvents
+   */
+  _turnOnEvents: function (tableWidgetDiv) {
+    var tableUniqueId = tableWidgetDiv.attr("tableUniqueId");
+
+    // If the choosen dataset representation is tablesorter
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) {
+      FHC_TableWidget._enableTableSorter(tableWidgetDiv); // enable the tablesorter
+    }
+
+    // If the choosen dataset representation is tabulator
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR) {
+      // ---------------------------------------------------------------------------------------------------------
+      // Add events to the elements
+      // ---------------------------------------------------------------------------------------------------------
+
+      // Click-Event to download csv
+      tableWidgetDiv.find("#download-csv").on("click", function () {
+        // BOM for correct UTF-8 char output
+        tableWidgetDiv
+          .find("#tableWidgetTabulator")
+          .tabulator("download", "csv", "data.csv", { bom: true });
+      });
+
+      // Click-Event to toggle the collapsable help panel
+      tableWidgetDiv.find("#help").on("click", function () {
+        // Hide the collapsable settings panel, if it actually shown
+        $("#tabulatorSettings-" + tableUniqueId).collapse("hide");
+
+        // Toggle the collapsable help panel
+        $("#tabulatorHelp-" + tableUniqueId).collapse("toggle");
+      });
+
+      // Click-Event to toggle the collapsable settings panel
+      tableWidgetDiv.find("#settings").on("click", function () {
+        // Hide the collapsable help panel, if it actually shown
+        $("#tabulatorHelp-" + tableUniqueId).collapse("hide");
+
+        // Toggle the collapsable settings panel
+        $("#tabulatorSettings-" + tableUniqueId).collapse("toggle");
+      });
+
+      /* Beautify button group behaviour
+       * Let buttons stay active even until they are clicked again to close the collapsable help- oder setting panels
+       * Also remove the disturbing button focus behaviour
+       */
+      $(".btn-group > .btn").click(function () {
+        if ($(this).hasClass("active")) {
+          $(this).removeClass("active").css("outline", "none");
+        } else {
+          $(this)
+            .addClass("active")
+            .css("outline", "none")
+            .siblings()
+            .removeClass("active");
+        }
+      });
+
+      /**
+       * Click-Event to select all rows
+       * Default is ALL rows. This can be modified via hook tableWidgetHook_selectAllButton.
+       */
+      if (typeof tableWidgetHook_selectAllButton == "function") {
+        tableWidgetDiv.find("#select-all").on("click", function () {
+          tableWidgetHook_selectAllButton(tableWidgetDiv);
+        });
+      } else {
+        tableWidgetDiv.find("#select-all").on("click", function () {
+          tableWidgetDiv
+            .find("#tableWidgetTabulator")
+            .tabulator("selectRow", true);
+        });
+      }
+
+      // Click-Event to deselect all rows
+      tableWidgetDiv.find("#deselect-all").on("click", function () {
+        tableWidgetDiv.find("#tableWidgetTabulator").tabulator("deselectRow");
+      });
+
+      // Click-Event to toggle column-picker columns
+      //! this event was moved to the _onTableBuilt function
+    }
+  },
+
+  _renderDataset: function (tableWidgetDiv, data) {
+    // If the choosen dataset representation is tablesorter then...
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) {
+      FHC_TableWidget._renderDatasetTablesorter(tableWidgetDiv, data); // ...render the tablesorter GUI
+    }
+
+    // If the choosen dataset representation is pivotUI then...
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_PIVOTUI) {
+      FHC_TableWidget._renderDatasetPivotUI(tableWidgetDiv, data); // ...render the pivotUI GUI
+    }
+
+    // If the choosen dataset representation is tabulator then...
+    if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR) {
+      FHC_TableWidget._renderDatasetTabulator(tableWidgetDiv, data); // ...render the tabulator GUI
+    }
+  },
+
+  /**
+   * Renders the tablesorter for the TableWidget
+   * The data to be displayed are retrived from the parameter data
+   */
+  _renderDatasetTablesorter: function (tableWidgetDiv, data) {
+    if (
+      data.hasOwnProperty("checkboxes") &&
+      data.checkboxes != null &&
+      data.checkboxes.trim() != ""
+    ) {
+      tableWidgetDiv
+        .find("#tableWidgetTableDataset > thead > tr")
+        .append("<th data-filter='false' title='Select'>Select</th>");
+    }
+
+    var arrayFieldsToDisplay = FHC_TableWidget._getFieldsToDisplay(data);
+
+    for (var i = 0; i < arrayFieldsToDisplay.length; i++) {
+      var columnName = arrayFieldsToDisplay[i];
+
+      tableWidgetDiv
+        .find("#tableWidgetTableDataset > thead > tr")
+        .append("<th title='" + columnName + "'>" + columnName + "</th>");
+    }
+
+    if (
+      data.hasOwnProperty("additionalColumns") &&
+      $.isArray(data.additionalColumns)
+    ) {
+      for (var i = 0; i < data.additionalColumns.length; i++) {
+        var columnName = data.additionalColumns[i];
+
+        tableWidgetDiv
+          .find("#tableWidgetTableDataset > thead > tr")
+          .append("<th title='" + columnName + "'>" + columnName + "</th>");
+      }
+    }
+
+    if (arrayFieldsToDisplay.length > 0) {
+      if (data.hasOwnProperty("dataset") && $.isArray(data.dataset)) {
+        if (data.checkboxes != null && data.checkboxes != "") {
+          // select checkbox range with shift key
+          if (
+            typeof tableWidgetDiv.find("#tableWidgetTableDataset")
+              .checkboxes === "function"
+          )
+            tableWidgetDiv
+              .find("#tableWidgetTableDataset")
+              .checkboxes("range", true);
+        }
+        if (data.dataset.length == 0) {
+          // Display placeholder if Table is empty
+          var numColumns = arrayFieldsToDisplay.length;
+          if (
+            data.hasOwnProperty("additionalColumns") &&
+            $.isArray(data.additionalColumns)
+          ) {
+            numColumns += data.additionalColumns.length;
+          }
+          var strHtml = '<tr><td align="center" colspan="' + numColumns + '">';
+          strHtml += FHC_PhrasesLib.t("ui", "keineDatenVorhanden");
+          strHtml += "</td></tr>";
+          tableWidgetDiv
+            .find("#tableWidgetTableDataset > tbody")
+            .append(strHtml);
+        } else {
+          for (var i = 0; i < data.dataset.length; i++) {
+            var record = data.dataset[i];
+
+            if ($.isEmptyObject(record)) {
+              continue;
+            }
+
+            var strHtml = "<tr class='" + record.MARK_ROW_CLASS + "'>";
+
+            if (data.checkboxes != null && data.checkboxes != "") {
+              strHtml += "<td>";
+              strHtml +=
+                "<input type='checkbox' name='" +
+                data.checkboxes +
+                "[]' value='" +
+                record[data.checkboxes] +
+                "'>";
+              strHtml += "</td>";
+            }
+
+            $.each(arrayFieldsToDisplay, function (i, fieldToDisplay) {
+              if (record.hasOwnProperty(data.fields[i])) {
+                strHtml += "<td>" + record[data.fields[i]] + "</td>";
+              }
+            });
+
+            if (
+              data.additionalColumns != null &&
+              $.isArray(data.additionalColumns)
+            ) {
+              $.each(data.additionalColumns, function (i, additionalColumn) {
+                if (record.hasOwnProperty(additionalColumn)) {
+                  strHtml += "<td>" + record[additionalColumn] + "</td>";
+                }
+              });
+            }
+
+            strHtml += "</tr>";
+
+            tableWidgetDiv
+              .find("#tableWidgetTableDataset > tbody")
+              .append(strHtml);
+          }
+        }
+      }
+    }
+  },
+
+  /**
+   * Enable the tablesorter libs to render the dataset table with sorting features
+   */
+  _enableTableSorter: function (tableWidgetDiv) {
+    var tableWidgetTablesorter = tableWidgetDiv.find(
+      "#tableWidgetTableDataset"
+    );
+
+    // Checks if the table contains data (rows)
+    if (
+      tableWidgetTablesorter.find("tbody:empty").length == 0 &&
+      tableWidgetTablesorter.find("tr:empty").length == 0 &&
+      tableWidgetTablesorter.hasClass("table-condensed")
+    ) {
+      tableWidgetTablesorter.tablesorter({
+        dateFormat: "ddmmyyyy",
+        widgets: ["zebra", "filter"],
+        widgetOptions: {
+          filter_saveFilters: true,
+        },
+      });
+
+      $.tablesorter.updateAll(tableWidgetTablesorter[0].config, true, null);
+    }
+  },
+
+  /**
+   * Disable the tablesorter
+   */
+  _disableTablesorter: function (tableWidgetDiv) {
+    tableWidgetDiv.find("#tableWidgetTableDataset").trigger("disable");
+  },
+
+  /**
+   * Renders the pivotUI for the TableWidget
+   * The data to be displayed are retrived from the parameter data
+   */
+  _renderDatasetPivotUI: function (tableWidgetDiv, data) {
+    // Checks if options were given and returns them
+    var options = FHC_TableWidget._getRepresentationOptions(data);
+
+    // Manipulation for the representation!
+    var arrayFieldsToDisplay = FHC_TableWidget._getFieldsToDisplay(data);
+
+    // If there are fields to be displayed...
+    if (arrayFieldsToDisplay.length > 0) {
+      // ...if there are data to be displayed...
+      if (data.hasOwnProperty("dataset") && $.isArray(data.dataset)) {
+        // Build the array of objects used by pivotUI and store it in pivotUIData
+        var pivotUIData = [];
+
+        // Loops through data
+        for (var i = 0; i < data.dataset.length; i++) {
+          var record = data.dataset[i]; // Single record
+          var tmpObj = {}; // New object that represents a record
+
+          // Loops through columns of a record
+          $.each(arrayFieldsToDisplay, function (i, fieldToDisplay) {
+            if (record.hasOwnProperty(data.fields[i])) {
+              tmpObj[fieldToDisplay] = record[data.fields[i]]; // Add data with the column alias
+            }
+          });
+
+          // If additional columns are present...
+          if (
+            data.additionalColumns != null &&
+            $.isArray(data.additionalColumns)
+          ) {
+            // ...loops through them
+            $.each(data.additionalColumns, function (i, additionalColumn) {
+              if (record.hasOwnProperty(additionalColumn)) {
+                tmpObj[additionalColumn] = record[additionalColumn]; // Add the additional column
+              }
+            });
+          }
+
+          pivotUIData.push(tmpObj); // Add tmpObj to pivotUIData
+        }
+
+        // Renders the pivotUI
+        tableWidgetDiv
+          .find("#tableWidgetPivotUI")
+          .pivotUI(pivotUIData, options);
+      }
+    }
+  },
+
+  /**
+   * Retrives the fields to be displayed from the data parameter, if aliases are present then they are used
+   */
+  _getFieldsToDisplay: function (data) {
+    var arrayFieldsToDisplay = [];
+
+    if (data.hasOwnProperty("fields") && $.isArray(data.fields)) {
+      if (
+        data.hasOwnProperty("columnsAliases") &&
+        $.isArray(data.columnsAliases)
+      ) {
+        for (var sfc = 0; sfc < data.fields.length; sfc++) {
+          for (var fc = 0; fc < data.fields.length; fc++) {
+            if (data.fields[sfc] == data.fields[fc]) {
+              arrayFieldsToDisplay[sfc] = data.columnsAliases[fc];
+            }
+          }
+        }
+      } else {
+        arrayFieldsToDisplay = data.fields;
+      }
+    }
+
+    return arrayFieldsToDisplay;
+  },
+
+  /**
+   * Renders the tabulator for the TableWidget
+   * The data to be displayed are retrived from the parameter data
+   */
+  _renderDatasetTabulator: function (tableWidgetDiv, data) {
+    // Checks if options were given and returns them
+    var options = FHC_TableWidget._getRepresentationOptions(data);
+    // Checks if record fields definitions were given and returns them
+    var recordFieldsDefinitions =
+      FHC_TableWidget._getRepresentationFieldsDefinitions(data);
+
+    // Manipulation for the representation!
+    var arrayTabulatorColumns = FHC_TableWidget._getTabulatorColumns(
+      data,
+      recordFieldsDefinitions
+    );
+
+    if (arrayTabulatorColumns.length > 0) {
+      // ...if there are data to be displayed...
+      if (data.hasOwnProperty("dataset") && $.isArray(data.dataset)) {
+        if (options == null) options = {};
+        options.columnDefaults = {
+          // set header tooltip with column title
+          //! the old keyword is tooltipsHeader, the new keyword for the option is headerTooltip
+          headerTooltip:
+            typeof options.columnDefaults?.tooltipsHeader == "undefined"
+              ? true
+              : options.columnDefaults?.tooltipsHeader,
+        };
+        options.columns = arrayTabulatorColumns;
+        options.data = data.dataset;
+        options.persistence =
+          typeof options.persistence == "undefined"
+            ? true
+            : options.persistence; // enables persistence (default store in localStorage if available, else in cookie)
+        options.persistenceID =
+          typeof options.persistenceID == "undefined"
+            ? data.tableUniqueId
+            : options.persistenceID; // persistenceID to store persistence data seperately for multiple tables
+        options.movableColumns =
+          typeof options.movableColumns == "undefined"
+            ? true
+            : options.movableColumns; // allows changing column order
+
+        options.placeholder = _func_placeholder(); // display text when table is empty
+
+        // Renders the tabulator
+        tableWidgetDiv.find("#tableWidgetTabulator").tabulator(options);
+
+        //! callbacks that need to be attached after the table has built in tabulator version 5+
+        tableWidgetDiv
+          .find("#tableWidgetTabulator")
+          .tabulator("on", "rowSelectionChanged", _func_rowSelectionChanged);
+        tableWidgetDiv
+          .find("#tableWidgetTabulator")
+          .tabulator(
+            "on",
+            "columnVisibilityChanged",
+            _func_columnVisibilityChanged
+          );
+      }
+    }
+
+    // -------------------------------------------------------------------------------------------------------------
+    // Render TableWidget Header and -Footer
+    // -------------------------------------------------------------------------------------------------------------
+
+    // Render tableWidgetHeader
+
+    if (
+      typeof options.tableWidgetHeader == "undefined" ||
+      (typeof options.tableWidgetHeader != "undefined" &&
+        options.tableWidgetHeader != false)
+    ) {
+      var tabulatorHeaderHTML = _renderTabulatorHeaderHTML(tableWidgetDiv);
+      tableWidgetDiv.find("#tableWidgetHeader").append(tabulatorHeaderHTML);
+    }
+
+    /**
+     * 	tableWidgetFooter is NOT rendered by default.
+     * 	tableWidgetFooter is rendered, if tableWidgetFooter is set in tabulators datasetRepOptions.
+     *	Setup options like this:
+     *  tableWidgetFooter: {
+     *  	selectButtons: true  // tableWidgetFooter properties are checked in _renderTabulatorFooterHTML function
+     *  }
+     */
+    if (
+      typeof options.tableWidgetFooter != "undefined" &&
+      options.tableWidgetFooter != null
+    ) {
+      var tabulatorFooterHTML = _renderTabulatorFooterHTML(
+        options.tableWidgetFooter
+      );
+      tableWidgetDiv.find("#tableWidgetFooter").append(tabulatorFooterHTML);
+    }
+  },
+
+  /**
+   * Retrives the fields to be displayed from the data parameter, if aliases are present then they are used
+   */
+  _getTabulatorColumns: function (data, recordFieldsDefinitions) {
+    var fieldsToDisplayTabulator = [];
+
+    if (data.hasOwnProperty("fields") && $.isArray(data.fields)) {
+      for (var sfc = 0; sfc < data.fields.length; sfc++) {
+        for (var fc = 0; fc < data.fields.length; fc++) {
+          if (data.fields[sfc] == data.fields[fc]) {
+            // Build the array of objects (columns) used by tabulator and store it in tabulatorColumns
+            var tmpColumnObj = {}; // New object that represents a column
+
+            // If was given a definition for this field then use it!
+            if (
+              recordFieldsDefinitions != null &&
+              recordFieldsDefinitions.hasOwnProperty(data.fields[sfc])
+            ) {
+              tmpColumnObj = recordFieldsDefinitions[data.fields[sfc]];
+            }
+
+            tmpColumnObj.field = data.fields[sfc]; // Field name to be linked with dataset field name
+
+            // If there is an alias for this field use it to give a title to this field (header)
+            if (
+              data.hasOwnProperty("columnsAliases") &&
+              $.isArray(data.columnsAliases)
+            ) {
+              tmpColumnObj.title = data.columnsAliases[fc];
+            } // otherwise use the field name itself
+            else {
+              tmpColumnObj.title = data.fields[sfc];
+            }
+
+            fieldsToDisplayTabulator.push(tmpColumnObj); // Add tmpColumnObj to tabulatorColumns
+          }
+        }
+      }
+    }
+
+    // If additional columns are present...
+    if (
+      data.hasOwnProperty("additionalColumns") &&
+      data.additionalColumns != null &&
+      $.isArray(data.additionalColumns)
+    ) {
+      // ...loops through them
+      $.each(data.additionalColumns, function (i, additionalColumn) {
+        var tmpColumnObj = {}; // New object that represents a column
+
+        // If was given a definition for this field then use it!
+        if (
+          recordFieldsDefinitions != null &&
+          recordFieldsDefinitions.hasOwnProperty(additionalColumn)
+        ) {
+          tmpColumnObj = recordFieldsDefinitions[additionalColumn];
+        }
+
+        tmpColumnObj.title = additionalColumn; // Give a title to this field (header)
+        tmpColumnObj.field = additionalColumn; // Field name to be linked with dataset field name
+
+        fieldsToDisplayTabulator.push(tmpColumnObj); // Add tmpColumnObj to tabulatorColumns
+      });
+    }
+
+    return fieldsToDisplayTabulator;
+  },
+
+  /**
+   * Gets options for the representation
+   */
+  _getRepresentationOptions: function (data) {
+    var options = {}; // eventually contains options fot the representation
+
+    // Checks if options were given
+    if (
+      data.hasOwnProperty("datasetRepresentationOptions") &&
+      data.datasetRepresentationOptions != ""
+    ) {
+      var tmpOptions = eval("(" + data.datasetRepresentationOptions + ")"); // and converts them from string to javascript code
+
+      // If it is an object then can be used
+      if (typeof tmpOptions == "object") {
+        options = tmpOptions;
+      }
+    }
+
+    return options;
+  },
+
+  /**
+   * Gets record fields definitions to represent the dataset
+   */
+  _getRepresentationFieldsDefinitions: function (data) {
+    var fieldsDefinitions = {}; // eventually contains record fields definitions
+    // Checks if record fields definitions was given as parameter
+    if (
+      data.hasOwnProperty("datasetRepresentationFieldsDefinitions") &&
+      data.datasetRepresentationFieldsDefinitions != ""
+    ) {
+      var tmpFDefs = eval(
+        "(" + data.datasetRepresentationFieldsDefinitions + ")"
+      ); // and converts them from string to javascript code
+
+      // If it is an object then can be used
+      if (typeof tmpFDefs == "object") {
+        fieldsDefinitions = tmpFDefs;
+      }
+    }
+
+    return fieldsDefinitions;
+  },
+
+  /**
+   * Set what type of dataset representation was choosen
+   */
+  _setDatasetRepresentation: function (data) {
+    if (data.hasOwnProperty("datasetRepresentation")) {
+      FHC_TableWidget._datasetRepresentation = data.datasetRepresentation;
+    }
+  },
+
+  _setBootstrapVersion: function (data) {
+    _bootstrapVersion = data.bootstrapVersion;
+  },
+
+  _getTableWidgetUniqueIdArray: function () {
+    var tableWidgetUniqueIdArray = [];
+
+    $("div[id*='divTableWidgetDataset']").each(function (i, e) {
+      tableWidgetUniqueIdArray.push(e.attributes["tableUniqueId"].nodeValue);
+    });
+
+    return tableWidgetUniqueIdArray;
+  },
 };
 
 //**********************************************************************************************************************
@@ -778,39 +771,41 @@ var FHC_TableWidget = {
  * Processed when row selection changed.
  * Displays number of selected rows on row selection change.
  */
-function _func_rowSelectionChanged (data, rows){
-
-	$('#number-selected').html("Ausgewählte Zeilen: <strong>" + rows.length + "</strong>");
+function _func_rowSelectionChanged(data, rows) {
+  $("#number-selected").html(
+    "Ausgewählte Zeilen: <strong>" + rows.length + "</strong>"
+  );
 }
 
 /* Processed when columns visibility changed (e.g. using the column picker).
  * Redraws the table to expand columns to table width.
  */
-function _func_columnVisibilityChanged(column, visible){
+function _func_columnVisibilityChanged(column, visible) {
+  var table = column.getTable();
 
-	var table = column.getTable();
-
-	table.redraw();
+  table.redraw();
 }
 
 /*
  * Displays text when table is empty
  */
-function _func_placeholder(){
-	return '<h4>' + FHC_PhrasesLib.t('ui', 'keineDatenVorhanden') + '</h4>';
+function _func_placeholder() {
+  return "<h4>" + FHC_PhrasesLib.t("ui", "keineDatenVorhanden") + "</h4>";
 }
 
 // Returns TableWidget Header HTML (download-, setting button...)
-function _renderTabulatorHeaderHTML(tableWidgetDiv){
+function _renderTabulatorHeaderHTML(tableWidgetDiv) {
+  var tableUniqueId = tableWidgetDiv.attr("tableUniqueId");
 
-	var tableUniqueId = tableWidgetDiv.attr('tableUniqueId');
-
-	var tabulatorHeaderHTML = '';
-	tabulatorHeaderHTML += 
-	`<div class="btn-toolbar pull-right" role="toolbar">
+  var tabulatorHeaderHTML = "";
+  tabulatorHeaderHTML += `<div class="btn-toolbar ${
+    _bootstrapVersion == 3 ? "pull-right" : "float-end"
+  }" role="toolbar">
 		<div class="btn-group" role="group">
 			<!-- CSV Download button -->
-			<button id="download-csv" class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary'}" type="button" 
+			<button id="download-csv" class="btn ${
+        _bootstrapVersion == 3 ? "btn-default" : "btn-outline-secondary"
+      }" type="button" 
 			data-toggle="tooltip" data-placement="left" title="Download CSV">
 				<small>
 					CSV&nbsp;&nbsp;
@@ -818,13 +813,17 @@ function _renderTabulatorHeaderHTML(tableWidgetDiv){
 				<i class="fa fa-arrow-down"></i>
 			</button>
 			<!-- Hilfe Button -->
-			<button id="help" class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary'}" type="button"
+			<button id="help" class="btn ${
+        _bootstrapVersion == 3 ? "btn-default" : "btn-outline-secondary"
+      }" type="button"
 			data-toggle="collapse tooltip" data-target="tabulatorHelp-${tableUniqueId}" data-placement="left" 
 			title="${FHC_PhrasesLib.t("ui", "hilfe")}">
 				<i class="fa fa-question"></i>
 			</button>
 			<!-- Settings Button -->
-			<button id="settings" class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary'}" type="button" 
+			<button id="settings" class="btn ${
+        _bootstrapVersion == 3 ? "btn-default" : "btn-outline-secondary"
+      }" type="button" 
 			data-toggle="collapse tooltip" data-target="tabulatorSettings-${tableUniqueId}" data-placement="left"
 			title="${FHC_PhrasesLib.t("ui", "tabelleneinstellungen")}" 
 			aria-expanded="false" aria-controls="tabulatorSettings-${tableUniqueId}">
@@ -832,21 +831,23 @@ function _renderTabulatorHeaderHTML(tableWidgetDiv){
 			</button>
 		</div>
 	</div>
-	<br><br><br>`;
+	`;
 
-	return tabulatorHeaderHTML;
+  return tabulatorHeaderHTML;
 }
 
 // Returns collapsable HTML element for TableWidget header buttons
-function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv,arrayTabulatorColumns){
+function _renderTabulatorHeaderCollapseHTML(
+  tableWidgetDiv,
+  arrayTabulatorColumns
+) {
+  var tableUniqueId = tableWidgetDiv.attr("tableUniqueId");
 
-	var tableUniqueId = tableWidgetDiv.attr('tableUniqueId');
+  var tabulatorHeaderCollapseHTML = "";
 
-	var tabulatorHeaderCollapseHTML = '';
-
-	// CollapseHTML 'Settings'
-	if(_bootstrapVersion==3){
-	tabulatorHeaderCollapseHTML += `
+  // CollapseHTML 'Settings'
+  if (_bootstrapVersion == 3) {
+    tabulatorHeaderCollapseHTML += `
 	<div class="row ">
 		<div class="col-lg-12 collapse" id="tabulatorSettings-${tableUniqueId}">
 			<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
@@ -862,10 +863,9 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv,arrayTabulatorColumns
 					</div>
 					<div id="selectColumns-${tableUniqueId}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
 						<div class="panel-body">
-							<div class="btn-group" role="group">`
-	}else{
-		tabulatorHeaderCollapseHTML += 
-		`<div class="row my-4">
+							<div class="btn-group" role="group">`;
+  } else {
+    tabulatorHeaderCollapseHTML += `<div class="row my-4">
 			<div class="col-12 collapse" id="tabulatorSettings-${tableUniqueId}">
 				<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
 					<div class="accordion-item">
@@ -879,60 +879,78 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv,arrayTabulatorColumns
 						<div id="selectColumns-${tableUniqueId}" class="accordion-collapse collapse" role="tabpanel" aria-labelledby="headingOne" data-bs-parent="#accordion">
 							<div class=" accordion-body ">
 								<div class="d-flex flex-row flex-wrap btn-group" role="group">`;
-	}
-	// Create column picker (Spalten einstellen)
-	tableWidgetDiv.find('#tableWidgetTabulator').tabulator('getColumns').forEach(function(column)
-	{
-		var field = column.getField();
-		var title = column.getDefinition().title;
-		var btn_select_col_selected = column.isVisible() ? 'btn-select-col-selected' : '';
+  }
+  // Create column picker (Spalten einstellen)
+  tableWidgetDiv
+    .find("#tableWidgetTabulator")
+    .tabulator("getColumns")
+    .forEach(function (column) {
+      var field = column.getField();
+      var title = column.getDefinition().title;
+      var btn_select_col_selected = column.isVisible()
+        ? "btn-select-col-selected"
+        : "";
 
-		// If certain columns should be excluded from the column picker (define them in a blacklist array)
-		if (typeof tableWidgetBlacklistArray_columnUnselectable != 'undefined' &&
-			Array.isArray(tableWidgetBlacklistArray_columnUnselectable) &&
-			tableWidgetBlacklistArray_columnUnselectable.length)
-		{
-			if ($.inArray(field, tableWidgetBlacklistArray_columnUnselectable) < 0)
-			{
-				tabulatorHeaderCollapseHTML += `<button type="button" style="flex:0 0 auto " class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary flex-shrink-1'} btn-sm btn-select-col ${btn_select_col_selected} " aria-pressed="true" id="btn-${field}" value="${field}">${title}</button>`;
-			}
-		}
-		// Else provide all tabulator fields as pickable columns
-		else
-		{
-			tabulatorHeaderCollapseHTML += `<button type="button" style="flex:0 0 auto " class="btn ${_bootstrapVersion==3?'btn-default':'btn-outline-secondary flex-shrink-1'} btn-sm btn-select-col ${btn_select_col_selected} " aria-pressed="true" id="btn-${field}" value="${field}">${title}</button>`;
-		}
-	});
+      // If certain columns should be excluded from the column picker (define them in a blacklist array)
+      if (
+        typeof tableWidgetBlacklistArray_columnUnselectable != "undefined" &&
+        Array.isArray(tableWidgetBlacklistArray_columnUnselectable) &&
+        tableWidgetBlacklistArray_columnUnselectable.length
+      ) {
+        if (
+          $.inArray(field, tableWidgetBlacklistArray_columnUnselectable) < 0
+        ) {
+          tabulatorHeaderCollapseHTML += `<button type="button" style="flex:0 0 auto " class="btn ${
+            _bootstrapVersion == 3
+              ? "btn-default"
+              : "btn-outline-secondary flex-shrink-1"
+          } btn-sm btn-select-col ${btn_select_col_selected} " aria-pressed="true" id="btn-${field}" value="${field}">${title}</button>`;
+        }
+      }
+      // Else provide all tabulator fields as pickable columns
+      else {
+        tabulatorHeaderCollapseHTML += `<button type="button" style="flex:0 0 auto " class="btn ${
+          _bootstrapVersion == 3
+            ? "btn-default"
+            : "btn-outline-secondary flex-shrink-1"
+        } btn-sm btn-select-col ${btn_select_col_selected} " aria-pressed="true" id="btn-${field}" value="${field}">${title}</button>`;
+      }
+    });
 
-	
-		tabulatorHeaderCollapseHTML += '</div>'; // end btn-group
-		tabulatorHeaderCollapseHTML += '</div>'; // end panel-body / accordion-body
-		tabulatorHeaderCollapseHTML += '</div>'; // end panel-collapse / accordion-collapse
-		tabulatorHeaderCollapseHTML += '</div>'; // end panel / accordion-item
-		tabulatorHeaderCollapseHTML += '</div>'; // end panel-group / accordion
-		tabulatorHeaderCollapseHTML += ' </div>'; // end col
-		tabulatorHeaderCollapseHTML += ' </div>'; // end row
+  tabulatorHeaderCollapseHTML += "</div>"; // end btn-group
+  tabulatorHeaderCollapseHTML += "</div>"; // end panel-body / accordion-body
+  tabulatorHeaderCollapseHTML += "</div>"; // end panel-collapse / accordion-collapse
+  tabulatorHeaderCollapseHTML += "</div>"; // end panel / accordion-item
+  tabulatorHeaderCollapseHTML += "</div>"; // end panel-group / accordion
+  tabulatorHeaderCollapseHTML += " </div>"; // end col
+  tabulatorHeaderCollapseHTML += " </div>"; // end row
 
-	
-	
-	return tabulatorHeaderCollapseHTML;
+  return tabulatorHeaderCollapseHTML;
 }
 
 // Returns TableWidget Footer HTML (de-/select buttons,...)
-function _renderTabulatorFooterHTML(tableWidgetFooterOptions){
+function _renderTabulatorFooterHTML(tableWidgetFooterOptions) {
+  var tabulatorFooterHTML = "";
 
-	var tabulatorFooterHTML = '';
-
-	// If property selectButtons is true, render 'Alle auswaehlen / Alle abwaehlen' buttons
-	if (typeof tableWidgetFooterOptions.selectButtons != 'undefined' && tableWidgetFooterOptions.selectButtons == true)
-	{
-		tabulatorFooterHTML += 
-		`<div class="btn-toolbar" role="toolbar">
+  // If property selectButtons is true, render 'Alle auswaehlen / Alle abwaehlen' buttons
+  if (
+    typeof tableWidgetFooterOptions.selectButtons != "undefined" &&
+    tableWidgetFooterOptions.selectButtons == true
+  ) {
+    tabulatorFooterHTML += `<div class="btn-toolbar" role="toolbar">
 			<div class="btn-group" role="group">
-				<button id="select-all" class="btn ${_bootstrapVersion==3?'btn-default pull-left':'btn-outline-secondary float-start'} " type="button">
+				<button id="select-all" class="btn ${
+          _bootstrapVersion == 3
+            ? "btn-default pull-left"
+            : "btn-outline-secondary float-start"
+        } " type="button">
 			 		${FHC_PhrasesLib.t("ui", "alleAuswaehlen")}
 				</button>
-				<button id="deselect-all" class="btn ${_bootstrapVersion==3?'btn-default pull-left':'btn-outline-secondary float-start'} " type="button">
+				<button id="deselect-all" class="btn ${
+          _bootstrapVersion == 3
+            ? "btn-default pull-left"
+            : "btn-outline-secondary float-start"
+        } " type="button">
 					${FHC_PhrasesLib.t("ui", "alleAbwaehlen")}
 				</button>
 				<span id="number-selected" style="margin-left: 20px; line-height: 2; font-weight: normal">
@@ -941,16 +959,14 @@ function _renderTabulatorFooterHTML(tableWidgetFooterOptions){
 			</div>
 		</div>
 		</br></br>`;
-	}
+  }
 
-	return tabulatorFooterHTML;
+  return tabulatorFooterHTML;
 }
 
 /**
  * When JQuery is up
  */
-$(document).ready(function() {
-
-	FHC_TableWidget.display();
-
+$(document).ready(function () {
+  FHC_TableWidget.display();
 });