Commit 2e5f23ea authored by Carsten  Rose's avatar Carsten Rose
Browse files

Add Elias tips for tablesorter as a table in doc

parent 35fdf85d
Pipeline #4959 passed with stages
in 4 minutes and 15 seconds
......@@ -2718,22 +2718,38 @@ The *tablesorter* options:
Customization of tablesorter:
* Add the desired classes or data attributes to your table html, e.g.:
* Disable sorting `class="sorter-false"` on a '<th>' to disable sorting on that column (or: `data-sorter="false"`).
* Disable filter `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
* Add the desired classes or data attributes to your table html, e.g.:
* E.g. a dropdown: `class="filter-select"` (`example-widget-filter-custom <https://mottie.github.io/tablesorter/docs/example-widget-filter-custom.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.
+-----------------------------+----------------------------------------------------------------------------------------+
| Description | Syntax |
+=============================+========================================================================================+
| Disable sorter | <th class="sorter-false">... |
+-----------------------------+----------------------------------------------------------------------------------------+
| Disable filter | <th class="filter-false">... |
+-----------------------------+----------------------------------------------------------------------------------------+
| Filter as dropdown | <th class="filter-select">... |
+-----------------------------+----------------------------------------------------------------------------------------+
| Ignore entire row | Wrap <tr> inside a <tfoot>. Caution: May cause undesired print behavior. |
| | Use <tfoot style = "display:table-row-group;"> </tfoot> |
+-----------------------------+----------------------------------------------------------------------------------------+
| Custom value for cell | <td data-text="...">... |
+-----------------------------+----------------------------------------------------------------------------------------+
| Sorting for tables with | <tr class="tablesorter-hasChildRow">...</tr> <tr class="tablesorter-childRow">...</tr> |
| child rows (e.g. drilldown) | |
+-----------------------------+----------------------------------------------------------------------------------------+
* 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::
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment