Tabellen im FE sortieren

00Alex · 8. September 2011 13:09

Hallo Leute,

ich suche eine Extension mit der ich eine Tabelle erstellen kann, bei der der Nutzer im FE die mit einen Klick auf den jeweiligen Tabellenkopf die Daten von klein zu groß und umgekehrt sortieren kann. Die Tabelle soll für die Spieler-Statistik eines Vereins sein (Tore, gelbe und rote Karten usw.). Kennt jemand etwas vergleichbares?

Danke im Voraus!

MFG Alex

topshopper · 8. September 2011 22:02

Hallo,

kennst Du das JS TableSort?

Einfach das JS inkludieren und dann in der Tabelle den <table> und <th> Tags die Klasse "sortierbar" verpassen.
Das war´s.

Mehr Infos findest Du hier:
http://www.j-berkemeier.de/TableSort.html

Hilft das weiter?

topshopper · 8. September 2011 22:06

Hab eben gesehen,
dass es anscheinend auch eine EXT gibt:

bm_tablesort.

Probiers doch mal aus und teile deine Erfahrung;-)

00Alex · 10. September 2011 10:55

Das bm_tablesort gefällt mir sehr gut. Bin auf folgende Seite gestoßen: http://typo3.uni-koeln.de/bm_tablesort.html

Ich bin nach dieser Anleitung vorgegangen, aber leider werden die Sortierpfeile nicht angezeigt. Allgemein scheint es, egal welche ich eine Einstellung ich vornehme, das davon keine ausgeführt wird. Was könnte die Ausführung verhindern?

Danke im Voraus!

Grüße Alex

topshopper · 10. September 2011 15:49

Hi,
ich selbst kenne die EXT nicht.

Poste doch mal den Quellcode, wie die Tabelle gerendert wird.
Und das entsprechende CSS.

Vielleicht erkennt man ja da was...

00Alex · 11. September 2011 09:50

Also, ich hab jetzt festgestellt das der Inhalt der Datei setup.txt der Ext nicht automatisch ins SETUP eingetragen wurde. Ich hab den Inhalt nun händisch reinkopiert. Jetzt wird zwar die Tabelle richtig dargestellt, aber der CSS-Code ändert mir auch alles andere auf meiner Seite:x. Ich würde gern den Rest in der alten CSS-Definition lassen.

topshopper · 11. September 2011 11:33

Hi,
Hast Du einen Link zur Seite?

00Alex · 12. September 2011 20:14

Der Link ist http://www.bsvlohsa.de. Die CSS-Definition steht aber zur Zeit im Constants Editor für die Ext. auf None, sondern würde mir wie gesagt alles was auf meiner Seite als Tabelle definiert ist, auch so dargestellt werden wie die sortierbare Tabelle.

00Alex · 12. September 2011 20:31

00Alex schrieb
Der Link ist http://www.bsvlohsa.de. Die CSS-Definition steht aber zur Zeit im Constants Editor für die Ext. auf None, sondern würde mir wie gesagt alles was auf meiner Seite als Tabelle definiert ist, auch so dargestellt werden wie die sortierbare Tabelle.

Also nur noch mal zum Verständnis. Man kann im Constant Editor unter 3 verschiedenen Styles wählen: None (Eigenes CSS wird verwendet), Original und Typo3

Ich würde gerne das Original Style wählen, was aber nur für die eine Tabelle gelten soll.

Hier die CSS-Datei für den Original Style:

/*** Text Styles ***/
h1 {
color:#ADADAD;
font-size:20px;
font-style:oblique;
font-weight:normal;
letter-spacing:-1px;
line-height:22px;
margin:0pt auto 32px;
text-align:center;
width:600px;
}
h2 {
color:#AAAAAA;
font-size:17px;
font-style:oblique;
font-weight:normal;
line-height:19px;
margin:0pt auto 12px;
text-align:center;
width:600px;
}
h3 {
color:#999999;
font-size:16px;
font-style:bold;
font-weight:normal;
line-height:18px;
margin:0pt auto 12px;
text-align:center;
width:600px;
}

h1, h2, h3 {
font-family:Cambria,Georgia,"Times New Roman",serif;
}
p {
font-family:Cambria,Georgia,"Times New Roman",serif;
color:#999999;
font-size:13px;
font-weight:normal;
letter-spacing:1px;
text-align:center;
}

/*** Table ***/

table {
border-collapse:collapse;
border-left:1px solid #C1DAD7;
margin:0pt auto 1.5em;
padding:0pt;
width:auto;
}
.cs1 {
width:30em;
}
.cs2 {
width:20em;
}
.cs1 td, .cs2 td, #scientificNotation {
text-align:right;
}
caption {
font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:italic;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0pt auto;
padding:0pt 0pt 5px;
text-align:right;
width:auto;
}
th {
background:#CAE8EA url(img/bg_header.jpg) no-repeat scroll 0%;
border-bottom:1px solid #C1DAD7;
border-right:1px solid #C1DAD7;
border-top:1px solid #C1DAD7;
color:#4F6B72;
font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
letter-spacing:1px;
line-height:22px;
padding:8px 12px 4px;
text-align:center;
text-transform:uppercase;
vertical-align:middle;
}
th.left {
text-align:left;
}
th.right {
text-align:right;
}

td.total {
background:transparent none repeat scroll 0%;
border-left:0pt none;
border-right:1px solid #C1DAD7;
border-top:0pt none;
font-weight:bold;
letter-spacing:1px;
text-align:right;
text-transform:uppercase;
}
th.sortable, th.sortable-text, th.sortable-date, th.sortable-keep, th.sortable-date-dmy, th.sortable-numeric, th.sortable-currency, th.sortable-sortByTwelveHourTimestamp, th.sortable-sortIPAddress, th.sortable-sortEnglishLonghandDateFormat, th.sortable-sortScientificNotation, th.sortable-sortImage, th.sortable-sortFileSize {
background:#CAE8EA url(img/bg_header_sortable.jpg) no-repeat scroll 0%;
cursor:pointer;
padding:8px 12px 4px 16px;
}
th.forwardSort {
background:#CAE8EA url(img/bg_header_down.jpg) no-repeat scroll 0pt;
}
th.reverseSort {
background:#CAE8EA url(img/bg_header_up.jpg) no-repeat scroll 0pt;
}
table thead th.forwardSort a, table thead th.reverseSort a {
color:#000000;
text-decoration:none;
}
th a {
background:transparent none repeat scroll 0%;
color:#4F6B72;
text-decoration:none;
}
td a {
background:transparent none repeat scroll 0%;
color:#223399;
text-decoration:none;
}
td img {
border:3px solid #DDDDDD;
margin:0pt auto;
}
td a:hover {
background:transparent none repeat scroll 0%;
border-bottom:1px dotted #A80000;
color:#A84444;
}
td {
border-bottom:1px solid #C1DAD7;
border-right:1px solid #C1DAD7;
color:#4F6B72;
font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
padding:6px 12px;
text-align: center;
}

td.left {
text-align:left;
}
td.right {
text-align:right;
}

td.alternate {
background:#dddddd none repeat scroll 0%;
}

tr.alt {
background:#F5FAFA none repeat scroll 0%;
color:#797268;
}
tr[class="alt"] td {
background:#F5FAFA url(img/td_alt.jpg) no-repeat scroll 0%;
}

tr[class="alt"] td.alternate {
background:#aaaaaa none repeat scroll 0%;
}

td[class~="alt"] {
background:#EDF3F3 url(img/col_alt.jpg) no-repeat scroll 0% !important;
}
tbody tr.alt td:first-child {
background:#F5FAFA url(img/bullet2.gif) no-repeat scroll 0% 2px;
font-weight:bold;
}
tbody tr td:first-child {
background:#FFFFFF url(img/bullet1.gif) no-repeat scroll 0% 2px;
font-weight:bold;
}
* html tr.alt td {
background-color:#F5FAFA;
}
* html tr td.alt, * html tr.alt td.alt {
background-color:#EDF3F3;
}

/*** Pagination list styles ***/
ul.fdtablePaginater
{
display:table;
list-style:none;
padding:0;
margin:0 auto;
text-align:center;
height:2em;
width:auto;
margin-bottom:2em;
}
ul.fdtablePaginater li
{
display:table-cell;
padding-right:4px;
color:#666;
list-style:none;

-moz-user-select:none;
-khtml-user-select:none;
}
ul.fdtablePaginater li a.currentPage
{
border-color:#a84444 !important;
color:#000;
}
ul.fdtablePaginater li a:active
{
border-color:#222 !important;
color:#222;
}
ul.fdtablePaginater li a,
ul.fdtablePaginater li div
{
display:block;
width:2em;
font-size:1em;
color:#666;
padding:0;
margin:0;
text-decoration:none;
outline:none;
border:1px solid #ccc;
font-family:georgia, serif;
}
ul.fdtablePaginater li div
{
cursor:normal;
opacity:.5;
filter:alpha(opacity=50);
}
ul.fdtablePaginater li a span,
ul.fdtablePaginater li div span
{
display:block;
line-height:2em;
border:1px solid #fff;
background:#fff url(img/gradient.jpg) repeat-x 0 0px;
}
ul.fdtablePaginater li a
{
cursor:pointer;
}
ul.fdtablePaginater li a:focus
{
color:#333;
text-decoration:none;
border-color:#aaa;
}
.fdtablePaginaterWrap
{
text-align:center;
clear:both;
text-decoration:none;
}
ul.fdtablePaginater li .next-page span,
ul.fdtablePaginater li .previous-page span,
ul.fdtablePaginater li .first-page span,
ul.fdtablePaginater li .last-page span
{
font-weight:bold !important;
}
/* Keep the table columns an equal size during pagination */
td.sized1
{
width:16em;
text-align:left;
}
td.sized2
{
width:10em;
text-align:left;
}
td.sized3
{
width:7em;
text-align:left;
}

00Alex · 12. September 2011 20:43

Hab jetzt im Menü der Homepage zur Veranschaulichung eine Seite "Test" eingerichtet, bei der das Template der Ext wirkt, damit ich wenigstens die Seite wie gewohnt weiter laufen lassen kann.

00Alex · 12. September 2011 20:47

Und hier die Eintragungen im SETUP. Ich glaube das Problem liegt darin, dass alles global definiert wird.

plugin.tx_bmtablesort._CSS_DEFAULT_STYLE (

)
page.headerData.1234 = TEXT
page.headerData.1234.value (

)

[globalVar = LIT:original = {$plugin.tx_bmtablesort.useCSS}]
page.headerData.1235 = TEXT
page.headerData.1235.value = <link href="typo3conf/ext/bm_tablesort/res/tablesort/tablesort_orginal.css" type="text/css" rel="stylesheet"/>
[global]

[globalVar = LIT:typo3 = {$plugin.tx_bmtablesort.useCSS}]
page.headerData.1236 = TEXT
page.headerData.1236.value = <link href="typo3conf/ext/bm_tablesort/res/typo3/tablesort_typo3.css" type="text/css" rel="stylesheet"/>
[global]

tt_content.table.20 {
sortable = COA
sortable {
defaultClassNames {
highlightCurCol = alt
zebraStripRow = alt
}

debugClassName = 0

lang_hover_text_before = TEXT
lang_hover_text_before.data = LLL:EXT:bm_tablesort/locallang_db.xml:fe.hover_text_before

lang_hover_text_after = TEXT
lang_hover_text_after.data = LLL:EXT:bm_tablesort/locallang_db.xml:fe.hover_text_after

lang_first_page = TEXT
lang_first_page.data = LLL:EXT:bm_tablesort/locallang_db.xml:fe.first_page

lang_previous_page = TEXT
lang_previous_page.data = LLL:EXT:bm_tablesort/locallang_db.xml:fe.previous_page

lang_next_page = TEXT
lang_next_page.data = LLL:EXT:bm_tablesort/locallang_db.xml:fe.next_page

lang_last_page = TEXT
lang_last_page.data = LLL:EXT:bm_tablesort/locallang_db.xml:fe.last_page

lang_page_of_pages = TEXT
lang_page_of_pages.data = LLL:EXT:bm_tablesort/locallang_db.xml:fe.page_of_pages

}

topshopper · 13. September 2011 12:48

Okay, wenn ich Dich richtig verstanden habe, sollen die CSS nur für die Tabelle mit der id=col539-tableid gelten.

Denkbar wäre, den CSS-Anweisungen jeweils den Selector #col539-tableid voranzustellen - dann greifen die CSS-Anweisungen auch nur innerhalb dieser eindeutigen Tabelle.

Beispiel:

table#col539-tableid {
border-collapse:collapse;
border-left:1px solid #C1DAD7;
margin:0pt auto 1.5em;
padding:0pt;
width:auto;
}
table#col539-tableid.cs1 {
width:30em;
}
table#col539-tableid.cs2 {
width:20em;
}

usw.

Ich würde das Original-CSS "tablesort_orginal.css" aus der EXT in fileadmin kopieren und darin die Änderungen vornehmen.
Du musst dann im TS den Link zum neuen CSS-File angeben.

Ich hoffe, ich hab Dich richtig verstanden...
War es das, wonach Du suchst?

00Alex · 19. September 2011 23:22

Prima, super Sache!😃

Leider scheine ich noch ein paar Selectoren falsch zu setzen.

Könntest du mir vielleicht bitte in die CSS-Datei alle richtig setzen und posten? Das wäre echt hilfreich.

Danke!