Posted by Helmut_pdorf on 15 Mar 2012 14:49, last edited by Ed Johnson on 07 Dec 2014 03:17
(using the solution outside of Wikidot: http://www.kryogenix.org/code/browser/sorttable/ )
Neccessary:
1) a file attached to this page downloaded from the above link : (sorttable.js) ( see the doubble tt!) - click on file page edit buttons) at the bottom to see it)
2) a table - either in wikidpot simple source or expanded..
3) a html version of this ( put it from the browser source code!) with class="sortable" for the first row , cells
4) an iframe / html using the html-code of the table AND n the head section the attached javascript )
( http://community.wikidot.com/local--files/howto:sortable-tables-js/sorttable.js
and voilá - it works!
Example Table:
|| **Name** || **Salary** || **Extension** || **Start Date** || **Start Date(American)** ||
|| Bloggs, Fred|| 12000ドル.00 || 1353 || 18/08/2003 || 08/18/2003||
|| Shakespeare, Hamnet || 9000ドル || 9005 || 01/01/2002 || 01/01/2002 ||
||Mbogo, Arnold || 32010ドル.12 || 2755|| 09/08/1998 || 08/09/1998 ||
|| Fitz, Marvin|| 3300ドル || 5554|| 22/05/1995 || 05/22/1995 ||
|| Turvey, Kevin|| 191200ドル.00|| 2342 || 02/05/1979 || 05/02/1979||
|| Shakespeare, Bill|| 122000ドル.00 ||3211|| 12/11/1961 || 11/12/1961 ||
|| **TOTAL** || 369510ドル || || || ||Same table sortable:
(Click on the headers! ́1. click - sorted ascending, 2. sorted descending)
[フレーム]
How is this done ?
Have a look on the hmtl output of the table above ( the code related to the table above is shown under the point 2) - you can do this with a right mouse click on this/your page menu "view/show quell/source code"
1) Copy the HTML - source code from the browser
2) find the table start and end and copy it into such a "code block" ([[code type="HTML"]] ) for better control:
(2. code block on this Page)
<tableclass="wiki-content-table"><tr><td><strong>Name</strong></td><td><strong>Salary</strong></td><td><strong>Extension</strong></td><td><strong>Start Date</strong></td><td><strong>Start Date(American)</strong></td></tr><tr><td>Bloggs, Fred</td><td>12000ドル.00</td><td>1353</td><td>18/08/2003</td><td>08/18/2003</td></tr><tr><td>Shakespeare, Hamnet</td><td>9000ドル</td><td>9005</td><td>01/01/2002</td><td>01/01/2002</td></tr><tr><td>Mbogo, Arnold</td><td>32010ドル.12</td><td>2755</td><td>09/08/1998</td><td>08/09/1998</td></tr><tr><td>Fitz, Marvin</td><td>3300ドル</td><td>5554</td><td>22/05/1995</td><td>05/22/1995</td></tr><tr><td>Turvey, Kevin</td><td>191200ドル.00</td><td>2342</td><td>02/05/1979</td><td>05/02/1979</td></tr><tr><td>Shakespeare, Bill</td><td>122000ドル.00</td><td>3211</td><td>12/11/1961</td><td>11/12/1961</td></tr><tr><td><strong>TOTAL</strong></td><td>369510ドル</td><td></td><td></td><td></td></tr></table>
Now lets mark the header-fields as sortable and the root (TOTAL) as not sortable row
3) insert before the table:
<html>
<head>
<script type="text/javascript" src="http://community.wikidot.com/local--files/howto:sortable-tables-js/sorttable.js"></script>
</head>
<body>
4) CHANGE the table to class="sortable" !
<table class="sortable">
5) Insert into the table
(Notice that this is not neccessary if you have NO FOOT of the table ( "TOTAL" ) which should not be sorted )
<thead>
…. header row
</thead>
<tbody>
… body rows
</tbody>
<tfoot>
… footer row ( TOTAL)
</tfoot>
6) Insert AFTER the table:
</body>
</html>
Used Code block
The 3. code block looks now this:
<html><head><scripttype="text/javascript"src="http://community.wikidot.com/local--files/howto:sortable-tables-js/sorttable.js"></script></head><body><styletype="text/css"> th, td { padding: 3px !important; } /* Sortable tables table.sortable thead { background-color:#eee; color:#666666; font-weight: bold; cursor: default; } */ </style><tableclass="sortable"><thead><tr><td><strong>Name</strong></td><td><strong>Salary</strong></td><td><strong>Extension</strong></td><td><strong>Start Date</strong></td><td><strong>Start Date(American)</strong></td></tr></thead><tbody><tr><td>Bloggs, Fred</td><td>12000ドル.00</td><td>1353</td><td>18/08/2003</td><td>08/18/2003</td></tr><tr><td>Shakespeare, Hamnet</td><td>9000ドル</td><td>9005</td><td>01/01/2002</td><td>01/01/2002</td></tr><tr><td>Mbogo, Arnold</td><td>32010ドル.12</td><td>2755</td><td>09/08/1998</td><td>08/09/1998</td></tr><tr><td>Fitz, Marvin</td><td>3300ドル</td><td>5554</td><td>22/05/1995</td><td>05/22/1995</td></tr><tr><td>Turvey, Kevin</td><td>191200ドル.00</td><td>2342</td><td>02/05/1979</td><td>05/02/1979</td></tr><tr><td>Shakespeare, Bill</td><td>122000ドル.00</td><td>3211</td><td>12/11/1961</td><td>11/12/1961</td></tr></tbody><tfoot><tr><td><strong>TOTAL</strong></td><td>369510ドル</td><td></td><td></td><td></td></tr></tfoot></table></body></html>
(the style for the table.header is commented out..)
IFRAME the html code - table
This changed code block is the 3. Code block on this page - now wou can have a look on the (same!) table in an "iframe":
[[iframe http://community.wikidot.com/howto:sortable-tables-js/code/3 frameborder="1" align="middle" height="300px" width="550px" scrolling="yes" ]]
gives:
[フレーム]
—-
Rate the wish up!
There is on the feedback site a waiting wish for such a solution:
http://feedback.wikidot.com/wish:461/ (Sortable simple tables)
If you want this in an official source of wikidot - than rate it up!
Other used classes
Manually specifying a column's type
Sorttable works out the type of your columns in order to work out how to sort them (numbers sort differently than letters, for example). Occasionally, it might get it wrong. If so, you can explicitly specify a type for a column, which will override sorttable's assessment. To specify a type, add a class of sorttable_columntype to the header row of that column. Available column types are numeric, alpha, ddmm, and mmdd. The latter two are for dates, but are not likely to be useful because if sorttable fails to automatically identify a date then the sort won't work anyway.
So, for example, if you have a "part number" column which you want to be treated as if it were numeric, then you might do your table like this:
<table class="sortable">
<tr>
<th class="sorttable_numeric">Part number</th><th>Part name</th>
</tr>
<tr>
<td>111-A5</td><td>Three-eighths Gripley</td>
</tr>
<tr>
<td>31337-H4X0R</td><td>Computer system intrusion toolkit</td>
</tr>
</table>
Remember: you probably do not need to do this. It is unlikely that you'll need to "force" sorttable to recognise a column type. You may also want to investigate using custom sortkeys, above, as a better way of achieving your goals.
Using custom date formats
One common question with sorttable is how to make it handle custom date formats. Sorttable will have a try at understanding dates in whatever format you add them in, but it sometimes needs help. The way to do this is with custom sort keys, as mentioned above. If you have table cells like this:
<td>February 11th 2008, 1.19pm</td>
change them by adding a custom sort key in YYYYMMDDHHMMSS format:
<td sorttable_customkey="20080211131900">February 11th 2008, 1:19pm</td>
The YYYYMMDDHHMMSS format for the date in the custom key will sort properly, and sorttable will use the information in the custom key rather than the information in the table cell itself.
For other information look at the original site of Stuart Langridge: http://www.kryogenix.org/code/browser/sorttable/#customkeys
Related articles
Comments
to bump this into the forum!…
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
My table looks like that:
| Name | Rarity | ATK/DEF @ lv1 | ATK/DEF @ lv max | Deck Costs | SP Costs | Skill | Skill Effect | Skill Activator | SR/SSR Equipment |
|---|---|---|---|---|---|---|---|---|---|
| Airbender | HR | 1875/1687 | ?/? | 19 | 10 | Phalanx | Medium | Aztec Jaguar | - |
| Amazonian | R | 1290/1192 | ?/? | 16 | 8 | Shadow Strike | Minor | Wizard | - |
| Arch Angel | SSR | 5362/4950 | ?/? | 30 | 14 | Revelations Day | Large | Valkyrie | - |
When I use your code it look like that:
[[HTML]]
<head>
<script type="text/javascript" src="http://community.wikidot.com/local--files/howto:sortable-tables-js/sorttable.js"></script>
</head>
<body>
<table class="sortable">
<thead>
<tr>
<th><strong>Name</strong></th>
<th><strong>Rarity</strong></th>
<th><strong>ATK/DEF @ lv1</strong></th>
<th><strong>ATK/DEF @ lv max</strong></th>
<th><strong>Deck Costs</strong></th>
<th><strong>SP Costs</strong></th>
<th><strong>Skill</strong></th>
<th><strong>Skill Effect</strong></th>
<th><strong>Skill Activator</strong></th>
<th><strong>SR/SSR Equipment</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">Airbender</td>
<td style="text-align: center;">HR</td>
<td style="text-align: center;">1875/1687</td>
<td style="text-align: center;">?/?</td>
<td style="text-align: center;">19</td>
<td style="text-align: center;">10</td>
<td style="text-align: center;">Phalanx</td>
<td style="text-align: center;">Medium</td>
<td style="text-align: center;">Aztec Jaguar</td>
<td style="text-align: center;">-</td>
</tr>
<tr>
<td style="text-align: center;">Amazonian</td>
<td style="text-align: center;">R</td>
<td style="text-align: center;">1290/1192</td>
<td style="text-align: center;">?/?</td>
<td style="text-align: center;">16</td>
<td style="text-align: center;">8</td>
<td style="text-align: center;">Shadow Strike</td>
<td style="text-align: center;">Minor</td>
<td style="text-align: center;">Wizard</td>
<td style="text-align: center;">-</td>
</tr>
<tr>
<td style="text-align: center;">Arch Angel</td>
<td style="text-align: center;">SSR</td>
<td style="text-align: center;">5362/4950</td>
<td style="text-align: center;">?/?</td>
<td style="text-align: center;">30</td>
<td style="text-align: center;">14</td>
<td style="text-align: center;">Revelations Day</td>
<td style="text-align: center;">Large</td>
<td style="text-align: center;">Valkyrie</td>
<td style="text-align: center;">-</td>
</tr>
</table>
</body>
[[/html]]
So, I can sort it, but it destroyes my table. I would prefer to use my original table and to add the formulars to make my orignal table working. What do I have to do?
Thank you very much in advance for your help.
Greekinfer
The reason it doesn't look the same is that you have put no css styling in the html block. To make it look similar to your wikidot-styled table you would need to add css styles as follows:
[[HTML]]
<head>
<script type="text/javascript" src="http://community.wikidot.com/local--files/howto:sortable-tables-js/sorttable.js"></script>
<!--CSS STYLE STARTS HERE-->
<style type="text/css">
table.sortable {
border-collapse: collapse;
}
table.sortable thead tr {
background-color: #eee;
}
table.sortable thead tr th {
font-weight:bold;
}
table.sortable tbody tr td {
text-align:center;
}
table.sortable thead tr th, table.sortable tbody tr td {
border: 1px solid #888;
font-family: verdana;
font-size: 12px;
}
</style>
<!--CSS STYLE ENDS HERE-->
</head>
<body>
<table class="sortable">
<thead>
<tr>
<th>Name</strong></th>
<th>Rarity</strong></th>
<th>ATK/DEF @ lv1</strong></th>
<th>ATK/DEF @ lv max</strong></th>
<th>Deck Costs</strong></th>
<th>SP Costs</strong></th>
<th>Skill</strong></th>
<th>Skill Effect</strong></th>
<th>Skill Activator</strong></th>
<th>SR/SSR Equipment</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>Airbender</td>
<td>HR</td>
<td>1875/1687</td>
<td>?/?</td>
<td>19</td>
<td>10</td>
<td>Phalanx</td>
<td>Medium</td>
<td>Aztec Jaguar</td>
<td>-</td>
</tr>
<tr>
<td>Amazonian</td>
<td>R</td>
<td>1290/1192</td>
<td>?/?</td>
<td>16</td>
<td>8</td>
<td>Shadow Strike</td>
<td>Minor</td>
<td>Wizard</td>
<td>-</td>
</tr>
<tr>
<td>Arch Angel</td>
<td>SSR</td>
<td>5362/4950</td>
<td>?/?</td>
<td>30</td>
<td>14</td>
<td>Revelations Day</td>
<td>Large</td>
<td>Valkyrie</td>
<td>-</td>
</tr>
</table>
</body>
[[/html]]You can see that adding css classes generally also allows you to eliminate the styling you added on each line, so the html code has the same result but is much simpler and easier to maintain.
You can see the result below and also on my examples/testing site at http://vineyard.wikidot.com/sortable-tables
sortable-table-html.jpgRob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Thanks Rob!
I had no time to answer - and not the skills about CSS ! :)
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?