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
2e5f23ea
Commit
2e5f23ea
authored
Feb 06, 2021
by
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
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Documentation/Report.rst
View file @
2e5f23ea
...
...
@@ -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
::
...
...
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