Commit 01c1e7be authored by Elias Villiger's avatar Elias Villiger
Browse files

Feature #1261 - Add column selector and more customization

parent 0bb25f6f
Pipeline #880 passed with stage
in 1 minute and 41 seconds
...@@ -133,7 +133,8 @@ module.exports = function (grunt) { ...@@ -133,7 +133,8 @@ module.exports = function (grunt) {
cwd: 'node_modules/tablesorter/dist/js/', cwd: 'node_modules/tablesorter/dist/js/',
src: [ src: [
'jquery.tablesorter.combined.min.js', 'jquery.tablesorter.combined.min.js',
'extras/jquery.tablesorter.pager.min.js' 'extras/jquery.tablesorter.pager.min.js',
'widgets/widget-columnSelector.min.js'
], ],
expand: true, expand: true,
dest: typo3_js, dest: typo3_js,
...@@ -143,7 +144,8 @@ module.exports = function (grunt) { ...@@ -143,7 +144,8 @@ module.exports = function (grunt) {
cwd: 'node_modules/tablesorter/dist/js/', cwd: 'node_modules/tablesorter/dist/js/',
src: [ src: [
'jquery.tablesorter.combined.min.js', 'jquery.tablesorter.combined.min.js',
'extras/jquery.tablesorter.pager.min.js' 'extras/jquery.tablesorter.pager.min.js',
'widgets/widget-columnSelector.min.js'
], ],
expand: true, expand: true,
dest: 'js/', dest: 'js/',
......
...@@ -226,6 +226,7 @@ Setup CSS & JS ...@@ -226,6 +226,7 @@ Setup CSS & JS
# Needed for tablesorter # Needed for tablesorter
file12 = typo3conf/ext/qfq/Resources/Public/JavaScript/jquery.tablesorter.combined.min.js file12 = typo3conf/ext/qfq/Resources/Public/JavaScript/jquery.tablesorter.combined.min.js
file13 = typo3conf/ext/qfq/Resources/Public/JavaScript/jquery.tablesorter.pager.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: ...@@ -6765,16 +6766,38 @@ To turn any table into a sortable table, use this simple setup:
* Add the `class="tablesorter"` to your `<table>` element. * Add the `class="tablesorter"` to your `<table>` element.
* Make sure your `<table>` has a `<thead>` and `<tbody>`. * 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 In addition to the *tablesorter* class, there are the following additional options:
filter options and pagination, respectively. Please note that filtering and/or paging is only supported in combination
with sorting. * 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: :: Example: ::
10 { 10 {
sql = SELECT id, CONCAT('form&form=person&r=', id) AS _Pagee, lastName FROM person sql = SELECT id, CONCAT('form&form=person&r=', id) AS _Pagee, lastName, title FROM person
head = <table class="table tablesorter tablesorter-filter tablesorter-pager"> head = <table class="table tablesorter tablesorter-filter tablesorter-pager tablesorter-column-selector">
<thead><tr><th>Id</th><th data-sorter="false">Edit</th><th>Name</th></tr></thead><tbody> <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> tail = </tbody></table>
rbeg = <tr> rbeg = <tr>
rend = </tr> rend = </tr>
...@@ -6782,47 +6805,6 @@ Example: :: ...@@ -6782,47 +6805,6 @@ Example: ::
fend = </td> 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:
Monitor Monitor
......
...@@ -8,31 +8,55 @@ ...@@ -8,31 +8,55 @@
$(document).ready( function () { $(document).ready( function () {
$.tablesorter.themes.bootstrap.table = ""; $.tablesorter.themes.bootstrap.table = "";
$('.tablesorter:not(.tablesorter-filter)').tablesorter({
theme: "bootstrap", $('.tablesorter').each(function(i) {
widthFixed: true, var hasFilter = $(this).hasClass('tablesorter-filter');
headerTemplate: '{content} {icon}', var hasPager = $(this).hasClass('tablesorter-pager');
dateFormat: 'ddmmyyyy', var hasColumnSelector = $(this).hasClass('tablesorter-column-selector');
widgets: [ "uitheme", "saveSort"]
} ); var columnSelectorId = "qfq-column-selector-" + i;
$('.tablesorter-filter').tablesorter({ var columnSelectorTargetId = "qfq-column-selector-target-" + i;
var pagerId = "qfq-pager-" + i;
var tablesorterConfig = $(this).data("tablesorterConfig");
if (!tablesorterConfig) { // revert to default
tablesorterConfig = {
theme: "bootstrap", theme: "bootstrap",
widthFixed: true, widthFixed: true,
headerTemplate: '{content} {icon}', headerTemplate: "{content} {icon}",
dateFormat: 'ddmmyyyy', dateFormat: "ddmmyyyy",
widgets: [ "uitheme", "filter", "saveSort"], widgets: ["uitheme", "filter", "saveSort", "columnSelector"],
widgetOptions: { widgetOptions: {
filter_columnFilters: hasFilter, // turn filters on/off with true/false
filter_reset: ".reset", filter_reset: ".reset",
filter_cssFilter: "form-control" filter_cssFilter: "form-control",
} } ); columnSelector_mediaquery: false
$('.tablesorter-pager').each(function(i) { } };
var pagerId = "qfq-pager-" + i; }
$(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;">' + var pagerHtml = '<div id="' + pagerId + '" class="form-inline" style="margin-top:-20px; margin-bottom:20px;">' +
'<div class="btn-group btn-group-sm" role="group">' + '<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 first"><span class="glyphicon glyphicon-step-backward"></span></button>' +
'<button type="button" class="btn btn-default prev"><span class="glyphicon glyphicon-backward"></span></button>' + '<button type="button" class="btn btn-default prev"><span class="glyphicon glyphicon-backward"></span></button>' +
'</div>' + '</div><span class="pagedisplay"></span>' +
'<span class="pagedisplay"></span>' +
'<div class="btn-group btn-group-sm" role="group">' + '<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 next"><span class="glyphicon glyphicon-forward"></span></button>' +
'<button type="button" class="btn btn-default last"><span class="glyphicon glyphicon-step-forward"></span></button>' + '<button type="button" class="btn btn-default last"><span class="glyphicon glyphicon-step-forward"></span></button>' +
...@@ -51,6 +75,8 @@ $(document).ready( function () { ...@@ -51,6 +75,8 @@ $(document).ready( function () {
container: $("#" + pagerId), container: $("#" + pagerId),
cssGoto: ".pagenum", cssGoto: ".pagenum",
removeRows: false, removeRows: false,
output: '{startRow} - {endRow} / {filteredRows}' }); output: '{startRow} - {endRow} / {filteredRows}'
}); });
}
}); // end .each()
} ); } );
\ No newline at end of file
...@@ -336,3 +336,21 @@ td.tablesorter-pager{background-color:#e6eeee;margin:0} ...@@ -336,3 +336,21 @@ td.tablesorter-pager{background-color:#e6eeee;margin:0}
.tablesorter-pager select{margin:0;padding:0} .tablesorter-pager select{margin:0;padding:0}
.tablesorter-pager.disabled{display:none} .tablesorter-pager.disabled{display:none}
.tablesorter-pager .disabled{opacity:.5;cursor:default} .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;
}
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