Difference between revisions of "16 May 2007"
From Organic Design wiki
(News: Sortable tables) |
(he supports alternate bg colour in his sortable tables, updated example to demonstarte) |
||
| Line 1: | Line 1: | ||
{{news|title=MediaWiki Sortable Tables|img=|msg= | {{news|title=MediaWiki Sortable Tables|img=|msg= | ||
| − | It says in [[M:Help:Sorting]] that [[w:MediaWiki|MediaWiki]] version 1.9.x now has native support for sortable tables. But actually the method they're using is fully a [[w:client-side JavaScript|client-side JavaScript]] solution developed [http://www.joostdevalk.nl/code/sortable-table here] by [http://www.joostdevalk.nl/about-me Joost de Valk]. So by adding the source code to your [[MediaWiki:Common.js]] article (and enabling it by setting ''$wgUseSiteJs'' to true in your [[MW:LocalSettings.php|LocalSettings.php]] file) any wiki can do it. this will compliment the new [[MW:Extension:Display Filter|display filter]] and [[MW:Extension:UploadCSV|upload CSV]] extensions perfectly. | + | It says in [[M:Help:Sorting]] that [[w:MediaWiki|MediaWiki]] version 1.9.x now has native support for sortable tables. But actually the method they're using is fully a [[w:client-side JavaScript|client-side JavaScript]] solution developed [http://www.joostdevalk.nl/code/sortable-table here] by [http://www.joostdevalk.nl/about-me Joost de Valk]. So by adding the source code to your [[MediaWiki:Common.js]] article (and enabling it by setting ''$wgUseSiteJs'' to true in your [[MW:LocalSettings.php|LocalSettings.php]] file) any wiki can do it. this will compliment the new [[MW:Extension:Display Filter|display filter]] and [[MW:Extension:UploadCSV|upload CSV]] extensions perfectly. The following example also demonstrates another useful feature which is the alternate striped background colours making the table much easier to read, these stripes are maintained regardless of the sorting order of the table. |
| − | {{{!}} class=" | + | {{{!}} class="sortable" id=foo style="border: solid 1px #aaa" |
{{!}}- | {{!}}- | ||
| − | ! style="background: # | + | ! style="background: #ccc;" {{!}}City |
| − | ! style="background: # | + | ! style="background: #ccc;" {{!}}January<br/><span style="font-size:90%;">(Low)</span> |
| − | ! style="background: # | + | ! style="background: #ccc;" {{!}}January<br/><span style="font-size:90%;">(High)</span> |
| − | ! style="background: # | + | ! style="background: #ccc;" {{!}}July<br/><span style="font-size:90%;">(Low)</span> |
| − | ! style="background: # | + | ! style="background: #ccc;" {{!}}July<br/><span style="font-size:90%;">(High)</span> |
{{!}}- | {{!}}- | ||
| − | + | {{!}}[[Amman]]{{!}}{{!}}4°C{{!}}{{!}}12°C{{!}}{{!}}18°C{{!}}{{!}}32°C | |
| − | {{!}} | ||
| − | {{!}} | ||
| − | {{!}} | ||
| − | {{!}} | ||
{{!}}- | {{!}}- | ||
| − | + | {{!}}[[Baghdad]]{{!}}{{!}}0°C{{!}}{{!}}16°C{{!}}{{!}}24°C{{!}}{{!}}43°C | |
| − | {{!}} | ||
| − | {{!}} | ||
| − | {{!}} | ||
| − | {{!}} | ||
{{!}}- | {{!}}- | ||
| − | + | {{!}}[[Cairo]]{{!}}{{!}}8°C{{!}}{{!}}18°C{{!}}{{!}}21°C{{!}}{{!}}36°C | |
| − | {{!}} | ||
| − | {{!}} | ||
| − | {{!}} | ||
| − | {{!}} | ||
{{!}}- | {{!}}- | ||
| − | + | {{!}}[[Damascus]]{{!}}{{!}}0°C{{!}}{{!}}12°C{{!}}{{!}}16°C{{!}}{{!}}36°C | |
| − | {{!}} | ||
| − | {{!}} | ||
| − | {{!}} | ||
| − | {{!}} | ||
{{!}}- | {{!}}- | ||
| − | + | {{!}}[[Dubai]]{{!}}{{!}}15°C{{!}}{{!}}23°C{{!}}{{!}}30°C{{!}}{{!}}39°C | |
| − | {{!}} | ||
| − | {{!}} | ||
| − | {{!}} | ||
| − | {{!}} | ||
{{!}}- | {{!}}- | ||
| − | + | {{!}}[[Jerusalem]]{{!}}{{!}}5°C{{!}}{{!}}13°C{{!}}{{!}}17°C{{!}}{{!}}31°C | |
| − | {{!}} | ||
| − | {{!}} | ||
| − | {{!}} | ||
| − | {{!}} | ||
{{!}}- | {{!}}- | ||
| − | + | {{!}}[[Riyadh]]{{!}}{{!}}8°C{{!}}{{!}}21°C{{!}}{{!}}26°C{{!}}{{!}}42°C | |
| − | {{!}} | ||
| − | {{!}} | ||
| − | {{!}} | ||
| − | {{!}} | ||
{{!}}- | {{!}}- | ||
| − | + | {{!}}[[Tehran]]{{!}}{{!}}-3°C{{!}}{{!}}7°C{{!}}{{!}}22°C{{!}}{{!}}37°C | |
| − | {{!}} | ||
| − | {{!}} | ||
| − | {{!}} | ||
| − | {{!}} | ||
{{!}}} | {{!}}} | ||
*See [[M:Help:Sorting]] for details about syntax and usage | *See [[M:Help:Sorting]] for details about syntax and usage | ||
*Get the JavaScript code from [http://www.joostdevalk.nl/code/sortable-table www.joostdevalk.nl/code/sortable-table] | *Get the JavaScript code from [http://www.joostdevalk.nl/code/sortable-table www.joostdevalk.nl/code/sortable-table] | ||
}} | }} | ||
Revision as of 06:21, 16 May 2007
|
MediaWiki Sortable Tables
It says in M:Help:Sorting that MediaWiki version 1.9.x now has native support for sortable tables. But actually the method they're using is fully a client-side JavaScript solution developed here by Joost de Valk. So by adding the source code to your MediaWiki:Common.js article (and enabling it by setting $wgUseSiteJs to true in your LocalSettings.php file) any wiki can do it. this will compliment the new display filter and upload CSV extensions perfectly. The following example also demonstrates another useful feature which is the alternate striped background colours making the table much easier to read, these stripes are maintained regardless of the sorting order of the table.
| City | January (Low) |
January (High) |
July (Low) |
July (High) |
|---|---|---|---|---|
| Amman | 4°C | 12°C | 18°C | 32°C |
| Baghdad | 0°C | 16°C | 24°C | 43°C |
| Cairo | 8°C | 18°C | 21°C | 36°C |
| Damascus | 0°C | 12°C | 16°C | 36°C |
| Dubai | 15°C | 23°C | 30°C | 39°C |
| Jerusalem | 5°C | 13°C | 17°C | 31°C |
| Riyadh | 8°C | 21°C | 26°C | 42°C |
| Tehran | -3°C | 7°C | 22°C | 37°C |
- See M:Help:Sorting for details about syntax and usage
- Get the JavaScript code from www.joostdevalk.nl/code/sortable-table
