This Forum has been archived

Forums: Admin Central Index Technical Help Sortable Tables
Wikia's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

I'm trying to add the functionality of sortable tables to my wiki. I've searched through the help files and such, and I found the statement:
"Tables can be made sortable via client-side JavaScript with class="sortable" (in combination with the usual formatting: class="wikitable sortable"). This works in MediaWiki 1.9 and above, which is installed in all Wikimedia projects."
The problem is that this doesn't really help as I don't know what class="sortable" is and it doesn't seem to exsist on my wiki. I guess my question is what code do I need to put where so that I can make the wiki's tables sortable like they show Here: and

Alright, I did get it to work by looking at the code, and tweeking something, and also Sortable tables don't appear in the preview, so you have to actually publich the code to make them function. User:Bond_em7 16:09, March 21, 2012 (UTC)
The sorting doesn't work in previews because Wikia has disabled JavaScript when editing in the Wikia skin. The sorting does work in previews when editing with the Monobook skin. If you really want to check the sorting before publishing an edit, you can switch to Monobook in your preferences. --Gardimuer { ʈalk } 01:17, March 22, 2012 (UTC)

Sorting Dates

Pardon me for making a new section here.

My wiki is making use of a lot of sortable tables, but the problem is that it only sort alphabetically (or perhaps in ASCII order) even when I put this in the header code, as Meta-Wiki instucted:


As you can see in this article, date sorting simply doesn't work. I've yet to try sort by name in other articles. Is it unsupported or something? Do I need to upgrade the wiki version? Please help! --Mfaizsyahmi (talk) 06:44, March 31, 2012 (UTC)

I can find no mention of "data-sort-type" in Wikia's JS code. jquery.tablesorter.js doesn't seem to be loaded either. Maybe you should try to load that script manually... --  pecoes  08:09, March 31, 2012 (UTC) 
EDIT: On that MediaWiki page it says "data-sort-type" is supported from version 1.16.5 on. Wikia uses 1.16 if I'm not mistaken. I heard some time later this year they will upgrade to 1.19. Until then there's no date-sorting. --  pecoes  08:15, March 31, 2012 (UTC) 
Too bad. :( --Mfaizsyahmi (talk) 08:51, March 31, 2012 (UTC)
I suggest you read Wikipedia:Help:Sorting#Sort modes and Wikipedia:Help:Sorting#Sorting with a hidden key. The information there may help you sort the table rows the way you want. --Gardimuer { ʈalk } 10:13, April 1, 2012 (UTC)
Alright. It seems that date sorting will work on only a few formats. I've abbreviated the month names and it now sort properly. Thanks! --Mfaizsyahmi (talk) 04:58, April 2, 2012 (UTC)

P.S. Still not trying to sort by name, too lazy for it.

I just checked and it says 9 Mar 2012 > 2 Feb 2012 > 2 Mar 2012. Looks to me like it's still sorting alphabetically. Have you tried the hidden key suggestion? It would look like this:
<span style="display:none">2012-03-09</span>9 Mar 2012
<span style="display:none">2012-02-02</span>2 Feb 2012
<span style="display:none">2012-03-02</span>2 Mar 2012
YYYY-MM-DD can be sorted alphabetically. --  pecoes  05:48, April 02, 2012 (UTC) 
Date sorting has worked in my wiki, on the condition that you adhere to the formats in the help page Gardimuer had suggested. That means abbreviated month names (Jan, Feb, Mar,...) works, while full month names doesn't. --Mfaizsyahmi (talk) 07:40, April 2, 2012 (UTC)
This is what I just saw: 9 Mar 2012 > 2 Feb 2012 > 2 Mar 2012. That looks wrong to me.
The MediaWiki software uses PHP's strttotime function which has no problem with full month names:
echo strtotime('2012-03-02'), "\r\n";
echo strtotime('2 March 2012'), "\r\n";
echo strtotime('02 mar 2012'), "\r\n";
echo strtotime('2.3.2012'), "\r\n";
echo strtotime('2012/03/02'), "\r\n";
All of these output the same timestamp. If date-sorting worked, it wouldn't matter how you write the month names.
It doesn't work. Sorry! --  pecoes  08:13, April 02, 2012 (UTC) 
Ah, didn't notice that. I don't mind much though, and would rather wait for the MediaWiki update. Until then, hidden sortkey would have to do. Creating templates for the purpose might be feasible, but it'll be tedious for the editors. Thanks to point that out! --Mfaizsyahmi (talk) 20:35, April 2, 2012 (UTC)
Yeah. That's the catch. Reformatting all those dates is a lot of work. I did this one table - just to see if the sorting works. (and because I wrote a PHP class that can read and generate wikitables and I needed to test it). Feel free to revert the edit! --  pecoes  21:16, April 02, 2012 (UTC) 

Adding an index that doesn't move to a sortable table

Here I am again.

I would like to know of any other way to put an index column to a sortable table that won't move when the other columns are sorted (meaning that the column's contents would always be 1,2,3,4,... from the top down). In this article, I have managed to do so with templates and a very dirty css tweak to make use of the css count property:

 /* a very dirty css counter property utilization for template:count */
 body { counter-reset:csscount }
 span.css-count:after {
     content: counter(csscount);

Is there any easier way to achieve this? --Mfaizsyahmi (talk) 15:07, April 4, 2012 (UTC)

Have you tried setting the column to unsortable? --  pecoes  18:40, April 04, 2012 (UTC) 
That only makes the column unavailable to sort. The contents of the column will still move as a row when other columns are sorted. I don't think any help article covers this. Even MW can only suggest putting two tables side-by-side inside another container table, which of course defeats our purpose. --Mfaizsyahmi (talk) 21:22, April 4, 2012 (UTC)
Moving the index to an external table would have been my next suggestion as well. How is that problematic? You could do that with JavaScript and do away with that funky template of yours.
$(function () { 
    var index = '<table class="index"><thead><tr><th>#</th></tr></thead><tbody>';
    for (var i = 1, rows = $('table.sortable tr').length; i <= rows; i++) {
        index += '<tr><td>' + i + '</td></tr>';
    index += '</tbody></table>';
    $('.sortable').css({display: 'inline', margin: 0, width: '630px', float: 'right', clear: 'none'});
    $('.index').css({display: 'inline', margin: 0, width: '30px', float: 'left', clear: 'none'});

 pecoes  21:53, April 04, 2012 (UTC) 

Thanks for the code. I'm not at all proficient with JS. My guess is that copypasting it should make it work, and it only works on a one-column index table.
(I'm glad to have stumbled upon the css method first. My eyes would spin around their socket seeing any JS...) Thanks again! --Mfaizsyahmi (talk) 22:21, April 4, 2012 (UTC)
This is not particularly refined. It will work on any table with the class sortable, but only on pages that contain no more than one table. Also: The index table isn't styled in any way i.e. the two tables won't line up properly.
 pecoes  22:40, April 04, 2012 (UTC)