Extended FHC_TableWidget with column picker, header & footer

Added standard behaviour to FHC_TableWidget:
. Added column picker to new TableWidgetHeader div.
. Moved former footerElement (including Alle aus-/abwählen
buttons, CSV Downloads) from single specific files to new
TableWidgetFooter divs.
. Adapted other files to work with new FHC_TableWidget behaviour

public/js/TableWidget.js

@@ -182,11 +182,90 @@ var FHC_TableWidget = {
 	 */
 	_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 collapse settings div
+			tableWidgetDiv.find('#settings').on('click', function()
+			{
+
+				//... auch unteren event für settings hier hinein
+				$('#tabulatorSettings-' + tableUniqueId).collapse('toggle');
+
+				$(this).toggleClass('active focus');
+
+				// De/activate and un/focus on clicked settings button
+				if(!$(this).hasClass('active focus'))
+				{
+					$(this).css({'background-color': 'white', 'border-color' : '#ccc', 'outline': 'none'});
+				}
+				else
+				{
+					$(this).css({'background-color': '#e6e6e6'});
+				}
+			})
+
+			/**
+			 * 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
+			tableWidgetDiv.find('.btn-select-col').on('click', function()
+			{
+				var selected = this.value;
+
+				tableWidgetDiv.find("#tableWidgetTabulator").tabulator('toggleColumn', selected);
+
+				$(this).toggleClass('active');
+
+				if(!$(this).hasClass('active'))
+				{
+					$(this).css('background-color', 'white');
+				}
+				else
+				{
+					$(this).css('background-color', '#e6e6e6');
+				}
+			})
+		}
 	},
 
 	_renderDataset: function(tableWidgetDiv, data) {
@@ -443,11 +522,43 @@ var FHC_TableWidget = {
 
 				options.columns = arrayTabulatorColumns;
 				options.data = data.dataset;
-
+				options.rowSelectionChanged = function(data, rows){
+					_func_rowSelectionChanged(data, rows);
+				};
+				options.columnVisibilityChanged = function(column, visible) {
+					_func_columnVisibilityChanged(column, visible);
+				};
+				
 				// Renders the tabulator
 				tableWidgetDiv.find("#tableWidgetTabulator").tabulator(options);
 			}
 		}
+
+		// -------------------------------------------------------------------------------------------------------------
+		// Render TableWidget Header and -Footer
+		// -------------------------------------------------------------------------------------------------------------
+
+		// Render tableWidgetHeader
+		var tabulatorHeaderHTML = _renderTabulatorHeaderHTML(tableWidgetDiv);
+		tableWidgetDiv.find('#tableWidgetHeader').append(tabulatorHeaderHTML);
+
+		// Render the collapsable div triggered by button in tableWidgetHeader
+		var tabulatorHeaderCollapseHTML = _renderTabulatorHeaderCollapseHTML(tableWidgetDiv);
+		tableWidgetDiv.find('#tableWidgetHeader').after(tabulatorHeaderCollapseHTML);
+
+		/**
+		 * 	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 (options.tableWidgetFooter != 'undefined' && options.tableWidgetFooter != null)
+		{
+			var tabulatorFooterHTML = _renderTabulatorFooterHTML(options.tableWidgetFooter);
+			tableWidgetDiv.find('#tableWidgetFooter').append(tabulatorFooterHTML);
+		}
 	},
 
 	/**
@@ -584,6 +695,122 @@ var FHC_TableWidget = {
 	}
 };
 
+//**********************************************************************************************************************
+// Render functions
+//**********************************************************************************************************************
+/*
+ * 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>");
+}
+
+/* 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){
+
+	var table = column.getTable();
+
+	table.redraw();
+}
+
+// Returns TableWidget Header HTML (download-, setting button...)
+function _renderTabulatorHeaderHTML(tableWidgetDiv){
+
+	var tableUniqueId = tableWidgetDiv.attr('tableUniqueId');
+
+	var tabulatorHeaderHTML = '';
+	tabulatorHeaderHTML += '<div class="btn-toolbar pull-right" role="toolbar">';
+	tabulatorHeaderHTML += '<div class="btn-group" role="group">';
+	tabulatorHeaderHTML += '<button id="download-csv" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="left" title="Download CSV"><small>CSV&nbsp;&nbsp;</small><i class="fa fa-arrow-down"></i></button>';
+	tabulatorHeaderHTML += '<button id="settings" class="btn btn-default" type="button" data-toggle="collapse" data-target="tabulatorSettings-'+ tableUniqueId + '" aria-expanded="false" aria-controls="tabulatorSettings-'+ tableUniqueId + '"><i class="fa fa-cog"></i></button>';
+	tabulatorHeaderHTML += '</div>';
+	tabulatorHeaderHTML += '</div>';
+
+	return tabulatorHeaderHTML;
+}
+
+// Returns collapsable HTML element for TableWidget header buttons
+function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){
+
+	var tableUniqueId = tableWidgetDiv.attr('tableUniqueId');
+
+	var tabulatorHeaderCollapseHTML = '';
+	tabulatorHeaderCollapseHTML += '<br>';
+	tabulatorHeaderCollapseHTML += '<div class="row">';
+	tabulatorHeaderCollapseHTML += '<div class="col-lg-12 collapse" id="tabulatorSettings-'+ tableUniqueId + '">';
+	tabulatorHeaderCollapseHTML += '<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">';
+
+	tabulatorHeaderCollapseHTML += '<div class="panel panel-default">';
+	tabulatorHeaderCollapseHTML += '<div class="panel-heading" role="tab" id="headingOne">';
+	tabulatorHeaderCollapseHTML += '<h5 class="panel-title">';
+	tabulatorHeaderCollapseHTML += '<a role="button" data-toggle="collapse" data-parent="#accordion" href="#selectColumns-' + tableUniqueId + '" aria-expanded="false" aria-controls="selectColumns">Spalten einstellen</a>';
+	tabulatorHeaderCollapseHTML += '</h5>';
+	tabulatorHeaderCollapseHTML += '</div>'; // end panel-heading
+	tabulatorHeaderCollapseHTML += '<div id="selectColumns-' + tableUniqueId + '" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">';
+	tabulatorHeaderCollapseHTML += '<div class="panel-body">';
+	tabulatorHeaderCollapseHTML += '<div class="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 active_status = column.getVisibility() ? 'active' : '';
+
+		// 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" class="btn btn-default btn-sm btn-select-col ' + active_status +'" aria-pressed="true" id="btn-' + field + '" value="' + field + '">' + title + '</button>';
+			}
+		}
+		// Else provide all tabulator fields as pickable columns
+		else
+		{
+			tabulatorHeaderCollapseHTML += '<button type="button" class="btn btn-default btn-sm btn-select-col ' + active_status +'" aria-pressed="true" id="btn-' + field + '" value="' + field + '">' + title + '</button>';
+		}
+	});
+
+	tabulatorHeaderCollapseHTML += '</div>'; // end btn-group
+	tabulatorHeaderCollapseHTML += '</div>'; // end panel-body
+	tabulatorHeaderCollapseHTML += '</div>'; // end panel-collapse
+	tabulatorHeaderCollapseHTML += '</div>'; // end panel
+
+	tabulatorHeaderCollapseHTML += '</div>'; // end panel-group
+	tabulatorHeaderCollapseHTML += ' </div>'; // end col
+	tabulatorHeaderCollapseHTML += ' </div>'; // end row
+
+	return tabulatorHeaderCollapseHTML;
+}
+
+// Returns TableWidget Footer HTML (de-/select buttons,...)
+function _renderTabulatorFooterHTML(tableWidgetFooterOptions){
+
+	var tabulatorFooterHTML = '';
+
+	// If property selectButtons is true, render 'Alle auswaehlen / Alle abwaehlen' buttons
+	if (tableWidgetFooterOptions.selectButtons != 'undefined' && tableWidgetFooterOptions.selectButtons == true)
+	{
+		tabulatorFooterHTML += '<div class="btn-toolbar" role="toolbar">';
+		tabulatorFooterHTML += '<div class="btn-group" role="group">';
+		tabulatorFooterHTML += '<button id="select-all" class="btn btn-default pull-left" type="button">Alle auswählen</button>';
+		tabulatorFooterHTML += '<button id="deselect-all" class="btn btn-default pull-left" type="button">Alle abwählen</button>';
+		tabulatorFooterHTML += '<span id="number-selected" style="margin-left: 20px; line-height: 2; font-weight: normal">Ausgewählte Zeilen: <strong>0</strong></span>';
+		tabulatorFooterHTML += '</div>';
+		tabulatorFooterHTML += '</div>';
+		tabulatorFooterHTML += '</br></br>';
+	}
+
+	return tabulatorFooterHTML;
+}
+
 /**
  * When JQuery is up
  */

public/js/lehre/lehrauftrag/acceptLehrauftrag.js

@@ -19,6 +19,18 @@ const ICON_LEHRAUFTRAG_APPROVED = '<img src="../../../public/images/icons/fa-use
 const ICON_LEHRAUFTRAG_CHANGED = '<img src="../../../public/images/icons/fa-user-edit.png" style="height: 30px; width: 30px; margin: -6px;">';
 const ICON_LEHRAUFTRAG_CANCELLED = '<img src="../../../public/images/icons/fa-user-times.png" style="height: 30px; width: 30px; margin: -6px;">';
 
+// Fields that should not be provided in the column picker
+var tableWidgetBlacklistArray_columnUnselectable = [
+	'status',
+	'row_index',
+	'betrag',
+	'vertrag_id',
+	'vertrag_stunden',
+	'vertrag_betrag',
+	'storniert_von',				// fields from cancelledLehrauftragData
+	'letzterStatus_vorStorniert'	// fields from cancelledLehrauftragData
+];
+
 // -----------------------------------------------------------------------------------------------------------------
 // Mutators - setter methods to manipulate table data when entering the tabulator
 // -----------------------------------------------------------------------------------------------------------------
@@ -254,66 +266,22 @@ function func_renderComplete(table){
 	);
 }
 
-// Tabulator footer element
+// TableWidget Footer element
 // -----------------------------------------------------------------------------------------------------------------
 
-// Adds a footer with buttons select all / deselect all / download
-function func_footerElement(){
-
-	var footer_html = '<div class="row">';
-	footer_html += '<div class="col-lg-12" style="padding: 5px;">';
-
-	footer_html += '<div class="btn-toolbar pull-right" role="toolbar">';
-	footer_html += '<div class="btn-group" role="group">';
-	footer_html += '<button id="download-csv" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="left" title="Download CSV" onclick="footer_downloadCSV()"><small>CSV&nbsp;&nbsp;</small><i class="fa fa-arrow-down"></i></button>';
-	footer_html += '</div>';
-	footer_html += '</div>';
-
-	footer_html += '<div class="btn-toolbar" role="toolbar">';
-	footer_html += '<div class="btn-group" role="group">';
-	footer_html += '<button id="select-all" class="btn btn-default pull-left" type="button" onclick="footer_selectAll()">Alle auswählen</button>';
-	footer_html += '<button id="deselect-all" class="btn btn-default pull-left" type="button" onclick="footer_deselectAll()">Alle abwählen</button>';
-	footer_html += '<span id="number-selected" style="margin-left: 20px; line-height: 2; font-weight: normal"></span>';
-	footer_html += '</div>';
-	footer_html += '</div>';
-
-	footer_html += '</div>';
-	footer_html += '</div>';
-
-	return footer_html;
-}
-
-// Performs download CSV
-function footer_downloadCSV(){
-	$('#tableWidgetTabulator').tabulator("download", "csv", "data.csv", {bom:true}); // BOM for correct UTF-8 char output
-}
-
 /*
- * Performs select all
+ * Hook to overwrite TableWigdgets select-all-button behaviour
  * Select all (filtered) rows and ignore rows that are bestellt and erteilt
  */
-function footer_selectAll(){
-	$('#tableWidgetTabulator').tabulator('getRows', true)
-		.filter(row =>  row.getData().bestellt != null &&   // bestellt
-			row.getData().erteilt != null &&            // AND erteilt
-			row.getData().akzeptiert == null &&         // AND NOT akzeptiert
-			row.getData().status != 'Geändert')         // AND NOT geändert
+function tableWidgetHook_selectAllButton(tableWidgetDiv){
+	tableWidgetDiv.find("#tableWidgetTabulator").tabulator('getRows', true)
+		.filter(row =>  row.getData().bestellt != null &&	// bestellt
+			row.getData().erteilt != null &&				// AND erteilt
+			row.getData().akzeptiert == null &&				// AND NOT akzeptiert
+			row.getData().status != 'Geändert')				// AND NOT geändert
 		.forEach((row => row.select()));
 }
 
-/*
- * Performs deselect all
- * Deselect all (filtered) rows
- */
-function footer_deselectAll(){
-	$('#tableWidgetTabulator').tabulator('deselectRow');
-}
-
-// Displays number of selected rows on row selection change
-function func_rowSelectionChanged(data, rows){
-	$('#number-selected').html("Für Annehmen ausgewählt: <strong>" + rows.length + "</strong>");
-}
-
 // -----------------------------------------------------------------------------------------------------------------
 // Tabulator columns format functions
 // -----------------------------------------------------------------------------------------------------------------

public/js/lehre/lehrauftrag/approveLehrauftrag.js

@@ -19,6 +19,17 @@ const ICON_LEHRAUFTRAG_ORDERED = '<img src="../../../public/images/icons/fa-user
 const ICON_LEHRAUFTRAG_APPROVED = '<img src="../../../public/images/icons/fa-user-check.png" style="height: 30px; width: 30px; margin: -6px;">';
 const ICON_LEHRAUFTRAG_CHANGED = '<img src="../../../public/images/icons/fa-user-edit.png" style="height: 30px; width: 30px; margin: -6px;">';
 
+// Fields that should not be provided in the column picker
+var tableWidgetBlacklistArray_columnUnselectable = [
+	'status',
+	'row_index',
+	'personalnummer',
+	'betrag',
+	'vertrag_id',
+	'vertrag_stunden',
+	'vertrag_betrag'
+];
+
 // -----------------------------------------------------------------------------------------------------------------
 // Mutators - setter methods to manipulate table data when entering the tabulator
 // -----------------------------------------------------------------------------------------------------------------
@@ -301,65 +312,20 @@ function func_rowUpdated(row){
     row.getElement().style["pointerEvents"] = "none";
 }
 
-
-// Tabulator footer element
+// TableWidget Footer element
 // -----------------------------------------------------------------------------------------------------------------
 
-// Adds a footer with buttons select all / deselect all / download
-function func_footerElement(){
-
-    var footer_html = '<div class="row">';
-    footer_html += '<div class="col-lg-12" style="padding: 5px;">';
-
-    footer_html += '<div class="btn-toolbar pull-right" role="toolbar">';
-    footer_html += '<div class="btn-group" role="group">';
-    footer_html += '<button id="download-csv" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="left" title="Download CSV" onclick="footer_downloadCSV()"><small>CSV&nbsp;&nbsp;</small><i class="fa fa-arrow-down"></i></button>';
-    footer_html += '</div>';
-    footer_html += '</div>';
-
-    footer_html += '<div class="btn-toolbar" role="toolbar">';
-    footer_html += '<div class="btn-group" role="group">';
-    footer_html += '<button id="select-all" class="btn btn-default pull-left" type="button" onclick="footer_selectAll()">Alle auswählen</button>';
-    footer_html += '<button id="deselect-all" class="btn btn-default pull-left" type="button" onclick="footer_deselectAll()">Alle abwählen</button>';
-    footer_html += '<span id="number-selected" style="margin-left: 20px; line-height: 2; font-weight: normal"></span>';
-    footer_html += '</div>';
-    footer_html += '</div>';
-
-    footer_html += '</div>';
-    footer_html += '</div>';
-
-    return footer_html;
-}
-
-// Performs download CSV
-function footer_downloadCSV(){
-    $('#tableWidgetTabulator').tabulator("download", "csv", "data.csv", {bom:true}); // BOM for correct UTF-8 char output
-}
-
 /*
- * Performs select all
+ * Hook to overwrite TableWigdgets select-all-button behaviour
  * Select all (filtered) rows that are bestellt
  */
-function footer_selectAll(){
-    $('#tableWidgetTabulator').tabulator('getRows', true)
-        .filter(row => row.getData().personalnummer >= 0 && // NOT dummies
-            row.getData().bestellt != null &&           // AND bestellt
-            row.getData().erteilt == null &&            // AND NOT erteilt
-            row.getData().status != 'Geändert')         // AND NOT geaendert
-        .forEach((row => row.select()));
-}
-
-/*
- * Performs deselect all
- * Deselect all (filtered) rows
- */
-function footer_deselectAll(){
-    $('#tableWidgetTabulator').tabulator('deselectRow');
-}
-
-// Displays number of selected rows on row selection change
-function func_rowSelectionChanged(data, rows){
-    $('#number-selected').html("Für Erteilung ausgewählt: <strong>" + rows.length + "</strong>");
+function tableWidgetHook_selectAllButton(tableWidgetDiv){
+	tableWidgetDiv.find("#tableWidgetTabulator").tabulator('getRows', true)
+		.filter(row => row.getData().personalnummer >= 0 && // NOT dummies
+			row.getData().bestellt != null &&				// AND bestellt
+			row.getData().erteilt == null &&				// AND NOT erteilt
+			row.getData().status != 'Geändert')				// AND NOT geaendert
+		.forEach((row => row.select()));
 }
 
 // -----------------------------------------------------------------------------------------------------------------

public/js/lehre/lehrauftrag/orderLehrauftrag.js

@@ -18,6 +18,17 @@ const ICON_LEHRAUFTRAG_ORDERED = '<img src="../../../public/images/icons/fa-user
 const ICON_LEHRAUFTRAG_APPROVED = '<img src="../../../public/images/icons/fa-user-check.png" style="height: 30px; width: 30px; margin: -6px;">';
 const ICON_LEHRAUFTRAG_CHANGED = '<img src="../../../public/images/icons/fa-user-edit.png" style="height: 30px; width: 30px; margin: -6px;">';
 
+// Fields that should not be provided in the column picker
+var tableWidgetBlacklistArray_columnUnselectable = [
+	'status',
+	'row_index',
+	'personalnummer',
+	'betrag',
+	'vertrag_id',
+	'vertrag_stunden',
+	'vertrag_betrag'
+];
+
 // -----------------------------------------------------------------------------------------------------------------
 // Mutators - setter methods to manipulate table data when entering the tabulator
 // -----------------------------------------------------------------------------------------------------------------
@@ -309,64 +320,20 @@ function func_rowUpdated(row){
     row.getElement().style["pointerEvents"] = "none";
 }
 
-// Tabulator footer element
+// TableWidget Footer element
 // -----------------------------------------------------------------------------------------------------------------
 
-// Adds a footer with buttons select all / deselect all / download
-function func_footerElement(){
-
-    var footer_html = '<div class="row">';
-    footer_html += '<div class="col-lg-12" style="padding: 5px;">';
-
-    footer_html += '<div class="btn-toolbar pull-right" role="toolbar">';
-    footer_html += '<div class="btn-group" role="group">';
-    footer_html += '<button id="download-csv" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="left" title="Download CSV" onclick="footer_downloadCSV()"><small>CSV&nbsp;&nbsp;</small><i class="fa fa-arrow-down"></i></button>';
-    footer_html += '</div>';
-    footer_html += '</div>';
-
-    footer_html += '<div class="btn-toolbar" role="toolbar">';
-    footer_html += '<div class="btn-group" role="group">';
-    footer_html += '<button id="select-all" class="btn btn-default pull-left" type="button" onclick="footer_selectAll()">Alle auswählen</button>';
-    footer_html += '<button id="deselect-all" class="btn btn-default pull-left" type="button" onclick="footer_deselectAll()">Alle abwählen</button>';
-    footer_html += '<span id="number-selected" style="margin-left: 20px; line-height: 2; font-weight: normal"></span>';
-    footer_html += '</div>';
-    footer_html += '</div>';
-
-    footer_html += '</div>';
-    footer_html += '</div>';
-
-    return footer_html;
-}
-
-// Performs download CSV
-function footer_downloadCSV(){
-    $('#tableWidgetTabulator').tabulator("download", "csv", "data.csv", {bom:true}); // BOM for correct UTF-8 char output
-}
-
 /*
- * Performs select all
+ * Hook to overwrite TableWigdgets select-all-button behaviour
  * Select all (filtered) rows and ignore rows which have status bestellt
  */
-function footer_selectAll(){
-    $('#tableWidgetTabulator').tabulator('getRows', true)
-        .filter(row => row.getData().personalnummer >= 0 &&             // NOT dummies
-            row.getData().bestellt == null ||                       // AND neu
-            row.getData().bestellt != null &&                       // OR (bestellt
-            row.getData().status == 'Geändert')                     // AND geaendert)
-        .forEach((row => row.select()));
-}
-
-/*
- * Performs deselect all
- * Deselect all (filtered) rows
- */
-function footer_deselectAll(){
-    $('#tableWidgetTabulator').tabulator('deselectRow');
-}
-
-// Displays number of selected rows on row selection change
-function func_rowSelectionChanged(data, rows){
-    $('#number-selected').html("Für Bestellung ausgewählt: <strong>" + rows.length + "</strong>");
+function tableWidgetHook_selectAllButton(tableWidgetDiv){
+	tableWidgetDiv.find("#tableWidgetTabulator").tabulator('getRows', true)
+		.filter(row => row.getData().personalnummer >= 0 &&		// NOT dummies
+			row.getData().bestellt == null ||					// AND neu
+			row.getData().bestellt != null &&					// OR (bestellt
+			row.getData().status == 'Geändert')					// AND geaendert)
+		.forEach((row => row.select()));
 }
 
 // -----------------------------------------------------------------------------------------------------------------