Difference between revisions of "Sortable tables example"

From Organic Design wiki
 
m
 
(5 intermediate revisions by the same user not shown)
Line 5: Line 5:
 
{{!}}-
 
{{!}}-
 
! style="background: #ccc;" {{!}}City  
 
! style="background: #ccc;" {{!}}City  
! style="background: #ccc;" {{!}}January<br/><span style="font-size:90%;">(Low)</span>
+
! style="background: #ccc;" {{!}}January&nbsp;(Low)
! style="background: #ccc;" {{!}}January<br/><span style="font-size:90%;">(High)</span>
+
! style="background: #ccc;" {{!}}January&nbsp;(High)
! style="background: #ccc;" {{!}}July<br/><span style="font-size:90%;">(Low)</span>
+
! style="background: #ccc;" {{!}}July&nbsp;(Low)
! style="background: #ccc;" {{!}}July<br/><span style="font-size:90%;">(High)</span>
+
! style="background: #ccc;" {{!}}July&nbsp;(High)
 
{{!}}-
 
{{!}}-
 
{{!}}[[Amman]]{{!}}{{!}}4&deg;C{{!}}{{!}}12&deg;C{{!}}{{!}}18&deg;C{{!}}{{!}}32&deg;C
 
{{!}}[[Amman]]{{!}}{{!}}4&deg;C{{!}}{{!}}12&deg;C{{!}}{{!}}18&deg;C{{!}}{{!}}32&deg;C
Line 30: Line 30:
 
*Seems to have some problems determining sort method based on content, [http://www.organicdesign.co.nz/wiki/index.php?title=MediaWiki:Common.js&curid=9267&diff=70700&oldid=70699 this change] helped.
 
*Seems to have some problems determining sort method based on content, [http://www.organicdesign.co.nz/wiki/index.php?title=MediaWiki:Common.js&curid=9267&diff=70700&oldid=70699 this change] helped.
 
}}
 
}}
[[Category:Examples]]
 

Latest revision as of 22:36, 18 November 2014

Warning.svg This is a blog item that needs to be converted to the new Bliki format


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