|
|
(8 intermediate revisions by 2 users not shown) |
Line 1: |
Line 1: |
− | {{news|title=MediaWiki Sortable Tables|img=|msg= | + | {{news|title=Fast DOM querying|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. here's an example:
| + | A number of development threads we've been working on have recently run into trouble with the JavaScript not being able to easily obtain the necessary selections of nodes from the browser [[w:Document Object Model|DOM]]. These DOM queries are usually similar in nature to a CSS selector requiring, for example, a selection of all nodes contained within an element of specified tag-name, and having a ''class'' or ''id'' attribute of a specified value. Often it would be convenient to actually use CSS syntax to specify a selection statement (eg. ''a.new, a.ext, #portal a:hover''), and have a DOM-node-list returned containing all matching elements in the document. Many other people have been having similar problems with the limited selection abilities of the basic DOM methods and have come up with a number of open source solutions. |
| + | *[http://slayeroffice.com/code/getElementsByWhatever.html getElementsByWhatever] |
| + | *[http://simonwillison.net/2003/Mar/25/getElementsBySelector getElementsBySelector] ''- Simon Wilson'' |
| + | *[http://dean.edwards.name/weblog/2006/03/faster Faster DOM Queries] [http://dean.edwards.name/my/cssQuery (code)] ''- Dean Edwards'' |
| + | *[http://calculist.blogspot.com/2005/07/elementprototypegetelementsbyselector.html getElementsBySelector] ''- Dave Herman'' |
| + | *[http://alex.dojotoolkit.org/?p=550 Fast DOM Queries in Today’s Browsers] ''- Alex Russell'' |
| + | }} |
| | | |
− | {{{!}} class="wikitable sortable" id=foo | + | {{:Sortable tables example}} |
− | {{!}}-
| |
− | ! style="background: #CCCCCC; color:#000000;border:solid 1px #808080;" {{!}}City
| |
− | ! style="background: #99CCCC; color:#000000;border:solid 1px #608080;" {{!}}January<br/><span style="font-size:90%;">(Low)</span>
| |
− | ! style="background: #99CCCC; color:#000000;border:solid 1px #608080;" {{!}}January<br/><span style="font-size:90%;">(High)</span>
| |
− | ! style="background: #D99898; color:#000000;border:solid 1px #996B6B;" {{!}}July<br/><span style="font-size:90%;">(Low)</span>
| |
− | ! style="background: #D99898; color:#000000;border:solid 1px #996B6B;" {{!}}July<br/><span style="font-size:90%;">(High)</span>
| |
− | {{!}}-
| |
− | {{!}} style="text-align:center; background: #F2F2F2; color:#000000;font-size:90%;border:solid 1px #808080;padding:.3em;" {{!}}[[Amman]]
| |
− | {{!}} style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" {{!}}4°C
| |
− | {{!}} style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" {{!}}12°C
| |
− | {{!}} style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" {{!}}18°C
| |
− | {{!}} style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" {{!}}32°C
| |
− | {{!}}-
| |
− | {{!}} style="text-align:center; background: #F2F2F2; color:#000000;font-size:90%;border:solid 1px #808080;padding:.3em;" {{!}}[[Baghdad]]
| |
− | {{!}} style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" {{!}}0°C
| |
− | {{!}} style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" {{!}}16°C
| |
− | {{!}} style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" {{!}}24°C
| |
− | {{!}} style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" {{!}}43°C
| |
− | {{!}}-
| |
− | {{!}} style="text-align:center; background: #F2F2F2; color:#000000;font-size:90%;border:solid 1px #808080;padding:.3em;" {{!}}[[Cairo]]
| |
− | {{!}} style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" {{!}}8°C
| |
− | {{!}} style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" {{!}}18°C
| |
− | {{!}} style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" {{!}}21°C
| |
− | {{!}} style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" {{!}}36°C
| |
− | {{!}}-
| |
− | {{!}} style="text-align:center; background: #F2F2F2; color:#000000;font-size:90%;border:solid 1px #808080;padding:.3em;" {{!}}[[Damascus]]
| |
− | {{!}} style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" {{!}}0°C
| |
− | {{!}} style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" {{!}}12°C
| |
− | {{!}} style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" {{!}}16°C
| |
− | {{!}} style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" {{!}}36°C
| |
− | {{!}}-
| |
− | {{!}} style="text-align:center; background: #F2F2F2; color:#000000;font-size:90%;border:solid 1px #808080;padding:.3em;" {{!}}[[Dubai]]
| |
− | {{!}} style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" {{!}}15°C
| |
− | {{!}} style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" {{!}}23°C
| |
− | {{!}} style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" {{!}}30°C
| |
− | {{!}} style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" {{!}}39°C
| |
− | {{!}}-
| |
− | {{!}} style="text-align:center; background: #F2F2F2; color:#000000;font-size:90%;border:solid 1px #808080;padding:.3em;" {{!}}[[Jerusalem]]
| |
− | {{!}} style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" {{!}}5°C
| |
− | {{!}} style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" {{!}}13°C
| |
− | {{!}} style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" {{!}}17°C
| |
− | {{!}} style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" {{!}}31°C
| |
− | {{!}}-
| |
− | {{!}} style="text-align:center; background: #F2F2F2; color:#000000;font-size:90%;border:solid 1px #808080;padding:.3em;" {{!}}[[Riyadh]]
| |
− | {{!}} style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" {{!}}8°C
| |
− | {{!}} style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" {{!}}21°C
| |
− | {{!}} style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" {{!}}26°C
| |
− | {{!}} style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" {{!}}42°C
| |
− | {{!}}-
| |
− | {{!}} style="text-align:center; background: #F2F2F2; color:#000000;font-size:90%;border:solid 1px #808080;padding:.3em;" {{!}}[[Tehran]]
| |
− | {{!}} style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" {{!}}-3°C
| |
− | {{!}} style="text-align:center; background: #E6F2F2; color:#000000;font-size:90%;border:solid 1px #608080;" {{!}}7°C
| |
− | {{!}} style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" {{!}}22°C
| |
− | {{!}} style="text-align:center; background: #F2E6E6; color:#000000;font-size:90%;border:solid 1px #996B6B;" {{!}}37°C
| |
− | {{!}}}
| |
− | *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]
| |
− | }} | |