diff --git a/Documentation/Form.rst b/Documentation/Form.rst
index bafedaf38950db83d39d9c7f090f22a834ceff7b..f7a659f003883152b54a900eb48b9b08a603f52c 100644
--- a/Documentation/Form.rst
+++ b/Documentation/Form.rst
@@ -3214,7 +3214,7 @@ This example will display graphics instead of text 'add' and 'remove'. Also ther
tgClass = qfq-child-margin-top
tgAddClass = btn alert-success
tgAddText = <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
- tgRemoveClass = btn btn-danger alert-danger
+ tgRemoveClass = btn alert-danger
tgRemoveText = <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
Chart
diff --git a/Documentation/Installation.rst b/Documentation/Installation.rst
index 2329624f8fb76f597ed9d63dd63ba88a0a20e588..49ab70ffc0b55e3e4e5f65af18705d1ed0c10358 100644
--- a/Documentation/Installation.rst
+++ b/Documentation/Installation.rst
@@ -251,14 +251,15 @@ Setup CSS & JS
file10 = typo3conf/ext/qfq/Resources/Public/JavaScript/jquery.tablesorter.combined.min.js
file11 = typo3conf/ext/qfq/Resources/Public/JavaScript/jquery.tablesorter.pager.min.js
file12 = typo3conf/ext/qfq/Resources/Public/JavaScript/widget-columnSelector.min.js
+ file13 = typo3conf/ext/qfq/Resources/Public/JavaScript/widget-output.min.js
# Only needed in case FormElement 'annotate' is used.
- file13 = typo3conf/ext/qfq/Resources/Public/JavaScript/fabric.min.js
- file14 = typo3conf/ext/qfq/Resources/Public/JavaScript/qfq.fabric.min.js
+ file14 = typo3conf/ext/qfq/Resources/Public/JavaScript/fabric.min.js
+ file15 = typo3conf/ext/qfq/Resources/Public/JavaScript/qfq.fabric.min.js
# Only needed in case FullCalendar is used
- file15 = typo3conf/ext/qfq/Resources/Public/JavaScript/moment.min.js
- file16 = typo3conf/ext/qfq/Resources/Public/JavaScript/fullcalendar.min.js
+ file16 = typo3conf/ext/qfq/Resources/Public/JavaScript/moment.min.js
+ file17 = typo3conf/ext/qfq/Resources/Public/JavaScript/fullcalendar.min.js
}
diff --git a/Documentation/Report.rst b/Documentation/Report.rst
index 14efa26ef0f76ee2e91a15fac1f04725493cba58..515ea267d0b2efb0ccdf28d477e1a0d41072122b 100644
--- a/Documentation/Report.rst
+++ b/Documentation/Report.rst
@@ -2846,8 +2846,6 @@ The *tablesorter* options:
is shown.
* Class `tablesorter-column-selector` adds a column selector widget.
-
-
* Activate/Save/Delete `views`: Insert inside of a table html-tag the command::
{{ '<uniqueName>' AS _tablesorter-view-saver }}
@@ -2879,6 +2877,22 @@ The *tablesorter* options:
* If there is a public view with the name 'Default' and a user has no choosen a view earlier, that one will be selected.
+* You can export your tablesorter tables as CSV files using the output widget (be sure to include the separate JS file):
+
+ * Create a button to trigger the export with the following Javascript::
+
+ $('table.tablesorter').trigger('outputTable');
+
+ * Default export file name: `tableExport.csv`
+ * Exported with column separator `;`
+ * Only currently filtered rows are exported.
+ * Values are exported as text, without HTML tags
+ * You can change the formatting/value of each cell as follows::
+
+ <td data-name="12345">CHF 12,345.-</td>
+
+ * Headers and footers are exported as well.
+
Customization of tablesorter
^^^^^^^^^^^^^^^^^^^^^^^^^^^^
@@ -2909,7 +2923,7 @@ Customization of tablesorter
`data-tablesorter-config` on the table.
Use JSON syntax when passing in your own configuration, such as: ::
- data-tablesorter-config='{"theme":"bootstrap","widthFixed":true,"headerTemplate":"{content} {icon}","dateFormat":"ddmmyyyy","widgets":["uitheme","filter","saveSort","columnSelector"],"widgetOptions":{"filter_columnFilters":true,"filter_reset":".reset","filter_cssFilter":"form-control","columnSelector_mediaquery":false} }'
+ data-tablesorter-config='{"theme":"bootstrap","widthFixed":true,"headerTemplate":"{content} {icon}","dateFormat":"ddmmyyyy","widgets":["uitheme","filter","saveSort","columnSelector","output"],"widgetOptions":{"filter_columnFilters":true,"filter_reset":".reset","filter_cssFilter":"form-control","columnSelector_mediaquery":false,"output_delivery":"download","output_saveFileName":"tableExport.csv","output_separator":";"} }'
* If the above customization options are not enough, you can output your own HTML for the pager and/or column selector,
as well as your own `$(document).ready()` function with the desired config. In this case, it is recommended not to
diff --git a/Gruntfile.js b/Gruntfile.js
index 49e26fd5301f801f708d979f5fc28743ed4f20cc..6011661219c036b49ee8381879d0bba9be8eca69 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -113,7 +113,8 @@ module.exports = function (grunt) {
src: [
'jquery.tablesorter.combined.min.js',
'extras/jquery.tablesorter.pager.min.js',
- 'widgets/widget-columnSelector.min.js'
+ 'widgets/widget-columnSelector.min.js',
+ 'widgets/widget-output.min.js'
],
expand: true,
dest: typo3_js,
@@ -124,7 +125,8 @@ module.exports = function (grunt) {
src: [
'jquery.tablesorter.combined.min.js',
'extras/jquery.tablesorter.pager.min.js',
- 'widgets/widget-columnSelector.min.js'
+ 'widgets/widget-columnSelector.min.js',
+ 'widgets/widget-output.min.js'
],
expand: true,
dest: 'js/',
diff --git a/javascript/src/TablesorterController.js b/javascript/src/TablesorterController.js
index b8242c999f54efe1fd78fc9c4df47a27934f652e..d3643b083f8e3252dfb0803ba27cfef448932c42 100644
--- a/javascript/src/TablesorterController.js
+++ b/javascript/src/TablesorterController.js
@@ -32,12 +32,15 @@ var QfqNS = QfqNS || {};
widthFixed: true,
headerTemplate: "{content} {icon}",
dateFormat: "ddmmyyyy",
- widgets: ["uitheme", "filter", "saveSort", "columnSelector"],
+ widgets: ["uitheme", "filter", "saveSort", "columnSelector", "output"],
widgetOptions: {
filter_columnFilters: hasFilter, // turn filters on/off with true/false
filter_reset: ".reset",
filter_cssFilter: "form-control",
- columnSelector_mediaquery: false
+ columnSelector_mediaquery: false,
+ output_delivery: "download",
+ output_saveFileName: "tableExport.csv",
+ output_separator: ";"
} };
}