Feature #1261 - Add column selector and more customization

Gruntfile.js

@@ -133,7 +133,8 @@ module.exports = function (grunt) {
                         cwd: 'node_modules/tablesorter/dist/js/',
                         src: [
                             'jquery.tablesorter.combined.min.js',
-                            'extras/jquery.tablesorter.pager.min.js'
+                            'extras/jquery.tablesorter.pager.min.js',
+                            'widgets/widget-columnSelector.min.js'
                         ],
                         expand: true,
                         dest: typo3_js,
@@ -143,7 +144,8 @@ module.exports = function (grunt) {
                         cwd: 'node_modules/tablesorter/dist/js/',
                         src: [
                             'jquery.tablesorter.combined.min.js',
-                            'extras/jquery.tablesorter.pager.min.js'
+                            'extras/jquery.tablesorter.pager.min.js',
+                            'widgets/widget-columnSelector.min.js'
                         ],
                         expand: true,
                         dest: 'js/',

extension/Documentation/Manual.rst

@@ -226,6 +226,7 @@ Setup CSS & JS
 		# Needed for tablesorter
 		file12 = typo3conf/ext/qfq/Resources/Public/JavaScript/jquery.tablesorter.combined.min.js
 		file13 = typo3conf/ext/qfq/Resources/Public/JavaScript/jquery.tablesorter.pager.min.js
+		file14 = typo3conf/ext/qfq/Resources/Public/JavaScript/widget-columnSelector.min.js
 	}
 
 
@@ -6765,16 +6766,38 @@ To turn any table into a sortable table, use this simple setup:
 * Add the `class="tablesorter"` to your `<table>` element.
 * Make sure your `<table>` has a `<thead>` and `<tbody>`.
 
-In addition to the *tablesorter* class, you can add a *tablesorter-filter* and/or *tablesorter-pager* to add
-filter options and pagination, respectively. Please note that filtering and/or paging is only supported in combination
-with sorting.
+In addition to the *tablesorter* class, there are the following additional options:
+
+* Adding the class `tablesorter-filter` enables table filtering.
+* Adding the class `tablesorter-pager` adds table paging functionality. With this option the html for the page navigation
+  is dynamically injected.
+* Adding the class `tablesorter-column-selector` adds a column selector widget. With this option the html for the column
+  selector is dynamically injected.
+
+For additional customization there are the following options:
+
+* Add the desired classes or data attributes to your table html, e.g.:
+
+  * `data-sorter="false"` on a <th> to disable sorting on that column
+  * `class="filter-false"` on a <th> to hide the filter field for that column
+  * see docs for more options: https://mottie.github.io/tablesorter/docs/index.html
+
+* You can pass in a default configuration object for the main `tablesorter()` function by using the attribute
+  `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} }'
+* 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
+  use the above *tablesorter* classes since the QFQ javascript code could interfere with your javascript code.
 
 Example: ::
 
     10 {
-      sql = SELECT id, CONCAT('form&form=person&r=', id) AS _Pagee, lastName FROM person
-      head = <table class="table tablesorter tablesorter-filter tablesorter-pager">
-        <thead><tr><th>Id</th><th data-sorter="false">Edit</th><th>Name</th></tr></thead><tbody>
+      sql = SELECT id, CONCAT('form&form=person&r=', id) AS _Pagee, lastName, title FROM person
+      head = <table class="table tablesorter tablesorter-filter tablesorter-pager tablesorter-column-selector">
+          <thead><tr><th>Id</th><th data-sorter="false" class="filter-false">Edit</th>
+          <th>Name</th><th class="filter-select" data-placeholder="Select a title">Title</th>
+          </tr></thead><tbody>
       tail = </tbody></table>
       rbeg = <tr>
       rend = </tr>
@@ -6782,47 +6805,6 @@ Example: ::
       fend = </td>
     }
 
-
-Please note that if you want to customize certain aspects of the sorter, filter, or pager, you may have to add the
-appropriate javascript code for yourself (inside a `$(document).ready()`). If you do so, do not use
-the above *tablesorter* classes since the QFQ javascript code could then interfere with your javascript code.
-
-The default configuration is: ::
-
-    tablesorter() - without filter:
-    {
-        theme: "bootstrap",
-        widthFixed: true,
-        headerTemplate: '{content} {icon}',
-        dateFormat: 'ddmmyyyy',
-        widgets: [ "uitheme", "saveSort"]
-    }
-
-    tablesorter() - with filter:
-    {
-        theme: "bootstrap",
-        widthFixed: true,
-        headerTemplate: '{content} {icon}',
-        dateFormat: 'ddmmyyyy',
-        widgets: [ "uitheme", "filter", "saveSort"],
-        widgetOptions: {
-            filter_reset: ".reset",
-            filter_cssFilter: "form-control"
-        }
-    }
-
-    tablesorterPager():
-    {
-            container: $("#qfq-pager-{{num}}"),
-            cssGoto: ".pagenum",
-            removeRows: false,
-            output: '{startRow} - {endRow} / {filteredRows}' });
-    }
-
-
-For tables with the *tablesorter-pager* class, the paging navigation is dynamically injected upon loading the document;
-`{{num}}` is a sequential number.
-
 .. _monitor:
 
 Monitor

javascript/src/Tablesorter.js

@@ -8,49 +8,75 @@
 
 $(document).ready( function () {
     $.tablesorter.themes.bootstrap.table = "";
-    $('.tablesorter:not(.tablesorter-filter)').tablesorter({
-        theme: "bootstrap",
-        widthFixed: true,
-        headerTemplate: '{content} {icon}',
-        dateFormat: 'ddmmyyyy',
-        widgets: [ "uitheme", "saveSort"]
-    } );
-    $('.tablesorter-filter').tablesorter({
-        theme: "bootstrap",
-        widthFixed: true,
-        headerTemplate: '{content} {icon}',
-        dateFormat: 'ddmmyyyy',
-        widgets: [ "uitheme", "filter", "saveSort"],
-        widgetOptions: {
-            filter_reset: ".reset",
-            filter_cssFilter: "form-control"
-        } } );
-    $('.tablesorter-pager').each(function(i) {
+
+    $('.tablesorter').each(function(i) {
+        var hasFilter = $(this).hasClass('tablesorter-filter');
+        var hasPager = $(this).hasClass('tablesorter-pager');
+        var hasColumnSelector = $(this).hasClass('tablesorter-column-selector');
+
+        var columnSelectorId = "qfq-column-selector-" + i;
+        var columnSelectorTargetId = "qfq-column-selector-target-" + i;
         var pagerId = "qfq-pager-" + i;
-        var pagerHtml = '<div id="' + pagerId + '" class="form-inline" style="margin-top:-20px; margin-bottom:20px;">' +
+
+        var tablesorterConfig = $(this).data("tablesorterConfig");
+        if (!tablesorterConfig) { // revert to default
+            tablesorterConfig = {
+                theme: "bootstrap",
+                widthFixed: true,
+                headerTemplate: "{content} {icon}",
+                dateFormat: "ddmmyyyy",
+                widgets: ["uitheme", "filter", "saveSort", "columnSelector"],
+                widgetOptions: {
+                    filter_columnFilters: hasFilter, // turn filters on/off with true/false
+                    filter_reset: ".reset",
+                    filter_cssFilter: "form-control",
+                    columnSelector_mediaquery: false
+                } };
+        }
+
+        $(this).tablesorter(tablesorterConfig);
+
+        if (hasColumnSelector) {
+            var columnSelectorHtml = '<button id="' + columnSelectorId + '" class="btn btn-default qfq-column-selector" ' +
+                'type="button" style="float:right;">' +
+                '<span class="dropdown-text"><span class="icon glyphicon glyphicon-th-list"></span></span>' +
+                '<span class="caret"></span></button>' +
+                '<div class="hidden"><div id="' + columnSelectorTargetId + '" class="qfq-column-selector-target"> </div></div>';
+            $(columnSelectorHtml).insertBefore($(this));
+            $.tablesorter.columnSelector.attachTo($(this), '#' + columnSelectorTargetId);
+            $('#' + columnSelectorId).popover({
+                placement: 'left',
+                html: true, // required if content has HTML
+                content: $('#' + columnSelectorTargetId)
+            });
+        }
+
+        if (hasPager) {
+            var pagerHtml = '<div id="' + pagerId + '" class="form-inline" style="margin-top:-20px; margin-bottom:20px;">' +
                 '<div class="btn-group btn-group-sm" role="group">' +
                 '<button type="button" class="btn btn-default first"><span class="glyphicon glyphicon-step-backward"></span></button>' +
                 '<button type="button" class="btn btn-default prev"><span class="glyphicon glyphicon-backward"></span></button>' +
-                '</div>' +
-                '<span class="pagedisplay"></span>' +
-                    '<div class="btn-group btn-group-sm" role="group">' +
-                    '<button type="button" class="btn btn-default next"><span class="glyphicon glyphicon-forward"></span></button>' +
+                '</div><span class="pagedisplay"></span>' +
+                '<div class="btn-group btn-group-sm" role="group">' +
+                '<button type="button" class="btn btn-default next"><span class="glyphicon glyphicon-forward"></span></button>' +
                 '<button type="button" class="btn btn-default last"><span class="glyphicon glyphicon-step-forward"></span></button>' +
                 '</div>' +
                 '<select class="form-control input-sm pagesize" title="Select page size">' +
-                    '<option selected="selected" value="10">10</option>' +
-                    '<option value="25">25</option>' +
-                    '<option value="50">50</option>' +
-                    '<option value="100">100</option>' +
-                    '<option value="all">All Rows</option>' +
+                '<option selected="selected" value="10">10</option>' +
+                '<option value="25">25</option>' +
+                '<option value="50">50</option>' +
+                '<option value="100">100</option>' +
+                '<option value="all">All Rows</option>' +
                 '</select>' +
                 '<select class="form-control input-sm pagenum" title="Select page number"></select>' +
-            '</div>';
-        $(pagerHtml).insertAfter($(this));
-        $(this).tablesorterPager({
-            container: $("#" + pagerId),
-            cssGoto: ".pagenum",
-            removeRows: false,
-            output: '{startRow} - {endRow} / {filteredRows}' });
-    });
+                '</div>';
+            $(pagerHtml).insertAfter($(this));
+            $(this).tablesorterPager({
+                container: $("#" + pagerId),
+                cssGoto: ".pagenum",
+                removeRows: false,
+                output: '{startRow} - {endRow} / {filteredRows}'
+            });
+        }
+    }); // end .each()
 } );
\ No newline at end of file

less/tablesorter-bootstrap.less

@@ -335,4 +335,22 @@ td.tablesorter-pager{background-color:#e6eeee;margin:0}
 .tablesorter-pager .pagedisplay{padding:0 5px 0 5px;width:auto;white-space:nowrap;text-align:center}
 .tablesorter-pager select{margin:0;padding:0}
 .tablesorter-pager.disabled{display:none}
-.tablesorter-pager .disabled{opacity:.5;cursor:default}
\ No newline at end of file
+.tablesorter-pager .disabled{opacity:.5;cursor:default}
+
+
+// Additional styling
+input.tablesorter-filter.disabled {
+	display:none;
+}
+.qfq-column-selector span.caret {
+	margin-left:5px;
+}
+.qfq-column-selector-target label {
+	display: block;
+}
+.qfq-column-selector-target input {
+	margin-right: 5px;
+}
+.qfq-column-selector-target .disabled {
+	color: #ddd;
+}