Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
typo3
qfq
Commits
01c1e7be
Commit
01c1e7be
authored
Sep 13, 2018
by
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
Changes
4
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Gruntfile.js
View file @
01c1e7be
...
...
@@ -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
View file @
01c1e7be
...
...
@@ -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
View file @
01c1e7be
...
...
@@ -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
View file @
01c1e7be
...
...
@@ -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;
}
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment