Support #6690 Tablesorter for subrecords / refs #6690

extension/Documentation/Manual.rst

@@ -3330,7 +3330,11 @@ will be rendered inside the form as a HTML table.
     * *Constant '&'*: Indicate a 'constant' value. E.g. `&12:xId` or `{{...}}` (all possibilities, incl. further SELECT
       statements) might be used.
 
-  * *subrecordTableClass*: Optional. Default: 'table table-hover qfq-table-100'. If given, the default will be overwritten.
+  * *subrecordTableClass*: Optional. Default: 'table table-hover qfq-subrecord-table'. If given, the default will be overwritten.
+    This parameter is helpful if you want to add tablesorting to your subrecord - example: ::
+
+	  subrecordTableClass = table table-hover qfq-subrecord-table tablesorter tablesorter-pager
+
   * *subrecordColumnTitleEdit*: Optional. Will be rendered as the column title for the new/edit column.
   * *subrecordColumnTitleDelete*: Optional. Will be rendered as the column title for the delete column.
 
@@ -6802,8 +6806,10 @@ For additional customization there are the following options:
 
 * 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:
+  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.

extension/qfq/qfq/AbstractBuildForm.php

@@ -2406,7 +2406,7 @@ abstract class AbstractBuildForm {
         }
 
         if ($flagDelete) {
-            $columns .= "<th>$deleteTitle</th>";
+            $columns .= "<th data-sorter='false' class='filter-false' data-priority='always'>$deleteTitle</th>";
         }
 
         return Support::wrapTag('<thead><tr>', $columns);
@@ -2461,7 +2461,7 @@ abstract class AbstractBuildForm {
             $editColumnTitle .= ' ' . $formElement[SUBRECORD_COLUMN_TITLE_EDIT];
 
             if ($flagNew || $flagEdit) {
-                $linkNew = Support::wrapTag('<th>', $editColumnTitle);
+                $linkNew = Support::wrapTag('<th  data-sorter="false" class="filter-false" data-priority="always">', $editColumnTitle);
             }
         }
 

extension/qfq/qfq/Constants.php

@@ -793,7 +793,7 @@ const SUBRECORD_COLUMN_ROW_CLASS = '_rowClass';
 const SUBRECORD_COLUMN_ROW_TITLE = '_rowTitle';
 const SUBRECORD_COLUMN_ROW_TOOLTIP = '_rowTooltip';
 
-const SUBRECORD_TABLE_CLASS_DEFAULT = 'table table-hover qfq-table-100 qfq-subrecord-table';
+const SUBRECORD_TABLE_CLASS_DEFAULT = 'table table-hover qfq-subrecord-table';
 
 const GLYPH_ICON = 'glyphicon';
 const GLYPH_ICON_EDIT = 'glyphicon-pencil';

javascript/src/Tablesorter.js

@@ -37,11 +37,11 @@ $(document).ready( function () {
         $(this).tablesorter(tablesorterConfig);
 
         if (hasColumnSelector) {
-            var columnSelectorHtml = '<button id="' + columnSelectorId + '" class="btn btn-default qfq-column-selector" ' +
-                'type="button" style="float:right;">' +
+            var columnSelectorHtml = '<div class="qfq-column-selector-wrapper"><button id="' + columnSelectorId + '" class="btn btn-default qfq-column-selector" ' +
+                'type="button">' +
                 '<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>';
+                '<div class="hidden"><div id="' + columnSelectorTargetId + '" class="qfq-column-selector-target"> </div></div></div>';
             $(columnSelectorHtml).insertBefore($(this));
             $.tablesorter.columnSelector.attachTo($(this), '#' + columnSelectorTargetId);
             $('#' + columnSelectorId).popover({

less/qfq-bs.css.less

@@ -147,7 +147,9 @@ select.qfq-locked:invalid {
 }
 
 .qfq-subrecord-table {
-  margin-top: 0;
+  margin-top: -20px;
+  min-width: 100%;
+  width: auto;
 }
 
 .qfq-form-title {

less/tablesorter-bootstrap.less

@@ -342,6 +342,15 @@ td.tablesorter-pager{background-color:#e6eeee;margin:0}
 input.tablesorter-filter.disabled {
 	display:none;
 }
+.qfq-column-selector-wrapper {
+	width: 100%;
+	position: relative;
+}
+.qfq-column-selector {
+	position: absolute;
+	top: -35px;
+	right: 0;
+}
 .qfq-column-selector span.caret {
 	margin-left:5px;
 }
@@ -354,3 +363,7 @@ input.tablesorter-filter.disabled {
 .qfq-column-selector-target .disabled {
 	color: #ddd;
 }
+
+.qfq-subrecord-table.tablesorter {
+	margin-top: 0;
+}
\ No newline at end of file