Last modified: 2014-09-24 07:52:04 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T42618, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 40618 - jquery.tablesorter: Add support for a "fixed" column
jquery.tablesorter: Add support for a "fixed" column
Status: NEW
Product: MediaWiki
Classification: Unclassified
JavaScript (Other open bugs)
unspecified
All All
: Low enhancement with 2 votes (vote)
: ---
Assigned To: Nobody - You can work on this!
:
: 2315 10433 40634 (view as bug list)
Depends on:
Blocks: 31601
  Show dependency treegraph
 
Reported: 2012-09-29 15:46 UTC by tm112
Modified: 2014-09-24 07:52 UTC (History)
10 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments
print screens of this table: unsorted and sorted by 2nd and 3rd column (8.55 KB, image/png)
2012-09-29 15:46 UTC, tm112
Details

Description tm112 2012-09-29 15:46:32 UTC
Created attachment 11148 [details]
print screens of this table: unsorted and sorted by 2nd and 3rd column

I tables where we enumerate sth we usually add first column with ordering numbers. Of course we set it as unsortable – BUT it doesn't prevent the column from being sorted while we sort another column. Then ordering numbers get all messed up.
There shouls be an additional parameter (class or sth) for setting which column should not be sorted.
(I cannot think of anything more in that column than ordering numbers…)

Simple example below (and here http://pl.wikipedia.org/w/index.php?title=Wikipedysta:Kaligula/brudnopis&oldid=32972991 ).

{| class="wikitable sortable" style="text-align:center;" align="left"
!class="unsortable"|№
!color
!name
!city
|-
|1||white||John||New York
|-
|2||green||Alice||Warsaw
|-
|3||black||Mark||Rennes
|}
Comment 1 Jesús Martínez Novo (Ciencia Al Poder) 2012-09-29 15:53:50 UTC
When you sort, it's not a column what gets sorted, but the rows of the table, using the selected column as the sort key. The "unsortable" stands for "do not sort using this column as a sort key".

Could you please provide a use case for this (one real example where it will be used)?

[ changing from bug to enhancement]
Comment 2 tm112 2012-09-29 18:59:04 UTC
Well, that was only just an immediate conclusion.

Speaking precisely, rows of one (or more) specified column(s) should not be sorted. Most commonly it will be the 1st column as usually there are ordering numbers – e.g. list of cities in Poland* http://pl.wikipedia.org/wiki/Miasta_w_Polsce_(statystyki) – while sorting by inhabitants, area, voivodeship, (…) the cells in 1st column with ordering numbers also get sorted while they shouldn't. The 1st column with ordering numbers informs quickly e.g. "Gdańsk is 6th in a row in terms of number of inhabitants" or "there are 125 cities with area <5 km²".

Ordering numbers just should be in order all the time regardless of sorting rows – otherwise they just become nonsense.

*) It's big article, may load long. In this article I tried to make separate table with ordering numbers that would not be sorted but that looks like… nothing good. The feature is craved.
Comment 3 Jesús Martínez Novo (Ciencia Al Poder) 2012-09-29 19:52:30 UTC
See this example: http://www.mediawiki.org/w/index.php?title=User:Ciencia_Al_Poder/Test&oldid=588713

Use the provided CSS code on that page to display the static numbers on the first column, that remain untouched when the table gets sorted. You can add that CSS to your personal css page.

It works for me on Mozilla Firefox 15.0.1. Not sure if other browsers support it.
Comment 4 Bartosz Dziewoński 2012-09-29 20:00:11 UTC
(In reply to comment #3)
> It works for me on Mozilla Firefox 15.0.1. Not sure if other browsers support
> it.

CSS counters are supported by all modern (and even slightly old) browsers except for IE <= 7. http://caniuse.com/#feat=css-counters

Unfortunately I think MW still supports IE 7?
Comment 5 tm112 2012-09-29 20:23:56 UTC
Yes, that could be not only a workaround but a solution. Thanks, I didn't know about it!

The counter property is supported in all major browsers (IE, FF, Opera, Chrome, Safari, maybe more). IE8 supports it only if a !DOCTYPE is specified.
//source: http://www.w3schools.com/cssref/pr_gen_counter-increment.asp
Comment 6 Bartosz Dziewoński 2012-09-29 20:26:09 UTC
Also, this solution requires the class to be added in every row, instead of just to the header. I don't think this can be circumvented using CSS magic.
Comment 7 tm112 2012-09-29 21:05:14 UTC
The "every row" issue can be avoided using:
 table.autonumber td:first-child
…which still doesn't change the fact that IE6/7 don't deal with it.
Comment 8 Krinkle 2012-09-30 00:25:12 UTC
Rephrasing ticket summary.

If I understand correctly you're looking for a way to let a column be fixed, unaffected by row re-ordering.

That is not a bug with "unsorted", "unsorted" works as it should, many people rely on the way it works. I believe you're looking for a new feature, I'll call it "fixed" for now.
Comment 9 tm112 2012-09-30 00:43:07 UTC
Yes, let's say it's a "new feature" but I feel it's inseparable part of "wikitable sortable" feature.

And yes, you're totally right with "fixed", thanks for clarification.
Comment 10 Krinkle 2012-09-30 00:45:38 UTC
(In reply to comment #9)
> Yes, let's say it's a "new feature" but I feel it's inseparable part of
> "wikitable sortable" feature.
> 

Sure. If we're going to add this, it'll be part of the jquery.tablesorter module.
Comment 11 tm112 2012-09-30 01:15:06 UTC
(In reply to comment #10)
> Sure. If we're going to add this, it'll be part of the jquery.tablesorter
> module.

Thanks.

I just looked into the code with hope that I could help a bit but I understand too little to see what's going on there ;) But I thought I'd ask if it could be like:
1) search for a colmun with class "fixed",
2) store it's order,
3) sort the table as usually,
4) recover the "fixed" column.

Or simplified version, only for ordering numbers:
1) sort table as usually
2) search for a column with class "ordering-numbers"
3) fill the cells of the column with ordering numbers.
Comment 12 Bartosz Dziewoński 2012-12-26 16:48:58 UTC
I've created a proof-of-concept implementation using the sortEnd.tablesorter event $.tablesorter fires upon finishing sorting.

The code is essentially five lines:

$('table.sortable th.unsortable.ordinal').each(function(i, th) {
  var $th = $(th), $table = $th.closest('table');
  $table.on('sortEnd.tablesorter', function() {
    $table.find('tr td:nth-child('+ (th.column+1) +')').each(function(j, td) {
      $(td).text( (j+1) );
    });
  })
});

This means that for every column with class="unsortable ordinal" on the header cell inside a table with class="sortable", the code will re-fill it with consecutive numbers, starting at 1, when the table is sorted. This allows for columns which contain ordinal numbers (the original use case).

The solution was discussed on pl.wikipedia's technical village pump[1][2] and is currently live in its common.js[3]. It's used on a few pages already, including the aforementioned [[pl:Miasta w Polsce (statystyki)]] and our help page with a list of interwiki codes, [[pl:Pomoc:Interwiki]].

[1] [[pl:Wikipedia:Kawiarenka/Kwestie techniczne#Poprawa tabeli w Miasta w Polsce (statystyki)]]
[2] [[pl:Wikipedia:Kawiarenka/Kwestie techniczne#Sortowanie tabeli]]
[3] [[pl:MediaWiki:Common.js]], at the very bottom
Comment 13 tm112 2012-12-26 22:33:59 UTC
And I'd say it works very well…! Thanks, Bartosz!
I really hope it will be implemented widely soon, as it's ready to work!
Comment 14 Bartosz Dziewoński 2012-12-31 15:19:40 UTC
*** Bug 40634 has been marked as a duplicate of this bug. ***
Comment 15 Timeshifter 2013-01-01 09:57:12 UTC
*** Bug 2315 has been marked as a duplicate of this bug. ***
Comment 16 Timeshifter 2013-01-01 10:26:33 UTC
I am not sure if bug 2315 and bug 10433 are resolved duplicates of this. I marked bug 2315 as a resolved duplicate of this, but now I am not sure. Maybe we can fix that problem too. 

It would be nice if the fixed number column was automatically numbered (row numbering) without having to fill in anything in the column cells at all. 

Bug 10433 offers some automatic numbering JS that does this:
[[User:Mike Dillon/Scripts/autonumber.js]]

via class="wikitable autonumber"

The example given at bug 10433 is this: "Example: say an author creates a chart that alphabetically lists all of the 535 members of the US Congress.  It would be laborious to list the numbers 1, 2, 3, … 533, 534, 535 near each of the 535 entries on the list.  And next time the list changes (at the next election, when names  are added to or subtracted from the list of Congress members), the author would have to repeat the laborious process of numbering the 535 entries on the  list all over again."

For bug 10433 the original poster's user page has moved to here:
[[User:Joseph A. Spadaro]]

The table wikitext he provided in bug 10433 produces this: 
[[User:Timeshifter/Sandbox29]]
Comment 17 Yair Rand 2014-03-31 05:30:34 UTC
To just get the fixed numbering column without manually adding cells to each row or using JS, one could use CSS generated-content cells with counters:
  table.autonumber > tbody {
    counter-reset: autonumbering;
  }
  table.autonumber > tbody > tr::before {
    counter-increment: autonumbering;
    content: counter(autonumbering);
  }
  table.autonumber > thead > tr::before {
    content: "№";
  }
  table.autonumber > thead > tr::before, table.autonumber > tbody > tr::before {
    display: table-cell;
    padding: 0.2em;
    border: 1px solid #AAA;
    vertical-align: middle;
    text-align: center;
  }
Comment 18 Timeshifter 2014-04-01 15:40:07 UTC
(In reply to Yair Rand from comment #17)
> To just get the fixed numbering column without manually adding cells to each
> row or using JS, one could use CSS generated-content cells with counters: ...

It works great, and is a lot easier to use than the row-numbering method I was using before. 

I am using Yair Rand's method on a ShoutWiki wiki. Currently using this easy method on the tables on these pages: 
*http://cannabis.shoutwiki.com/wiki/2014list 
*http://cannabis.shoutwiki.com/wiki/2013list 

Before I would have to manually create a cell at the beginning of each row in the table. Here is the table with the old method:
*http://cannabis.shoutwiki.com/w/index.php?title=2014list&oldid=21668

Now all I have to do is add this to the top line of any table: 

class="sortable autonumber"

I adapted the CSS a little. Here it is:
http://cannabis.shoutwiki.com/wiki/MediaWiki:Common.css 

I removed the border coloring, and I used # for the header. See: 
https://en.wikipedia.org/wiki/Number_sign 
# is more common in American English. 

I hope this easy method can be implemented soon on Wikipedia and the Commons. It is by far the easiest auto-row-numbering method I have seen. It would make things a lot easier than the hacks currently listed at Help:Sorting: 
*https://en.wikipedia.org/wiki/Help:Sorting - see "Static column" and following sections.
Comment 19 tm112 2014-04-02 11:10:56 UTC
This solution is great, I hope this one will be implemented soon.

As for '#' or '№' – I think there could be also an empty cell or even a cell without borders and background (as if there was no cell). It could also be up to local admins choice.
Comment 20 Bartosz Dziewoński 2014-04-02 18:51:56 UTC
(In reply to Yair Rand from comment #17)
> To just get the fixed numbering column without manually adding cells to each
> row or using JS, one could use CSS generated-content cells with counters:
>   <snip>

I was thinking about doing this with just CSS, and this solution is
very neat, but is has two problems:

1. Obviously, no support for old browsers. I understand that this is a
   trade-off that we're willing to make.

2. Less obviously, no support for internationalization!
   * No support for digit conversion (some languages use other numerals
     than 0 1 2 3 4 5 6 7 8 9, e.g. Arabic uses ٠‎ ١‎ ٢‎ ٣‎ ٤‎ ٥‎ ٦‎ ٧‎ ٨‎ ٩‎).
     I don't think this is possible with CSS (although I might be wrong).
   * No support for various typographic conventions on the number
     formatting; again, proper Polish would require a dot to be placed
     after the ordinal number (as in 1., 2., 3. etc. for first,
     second, third), some might want 1st, 2nd, 3rd etc. in English as
     well, and who knows what other languages might require.
   * In the heading neither "№" nor "#" would be acceptable in, say,
     Polish (we use "Lp." which is an abbreviation of "ordinal
     number"), although this might be worked around by just leaving
     the space empty as tm112 suggests above; I'm not sure if that'd
     be acceptable for all languages we support in MediaWiki, though.

It's probably a good solution on a per-wiki basis (for at least some
languages), but I'm afraid we won't be able to use it in core unless we
manage to solve the above problems (might be doable with some deep LESS
magic, at least for the latter two).
Comment 21 Bartosz Dziewoński 2014-04-02 18:55:26 UTC
(In reply to Bartosz Dziewoński from comment #20)
>    * No support for digit conversion (some languages use other numerals
>      than 0 1 2 3 4 5 6 7 8 9, e.g. Arabic uses ٠‎ ١‎ ٢‎ ٣‎ ٤‎ ٥‎ ٦‎ ٧‎ ٨‎
> ٩‎).
>      I don't think this is possible with CSS (although I might be wrong).

I underestimated the CSS designers, it does support this :) (in the spec at least). See <http://www.w3.org/TR/css-counter-styles-3/> and <http://www.w3.org/TR/predefined-counter-styles/>.
Comment 22 tm112 2014-04-02 19:30:47 UTC
They also say (on w3) that you can add suffix which solves the problem with number formatting that you mentioned. In such way those numbering issues are solved but every wiki would have to set its own @counter-style and heading cell content.
(Or – can it be preset?)
Comment 23 Timeshifter 2014-04-02 23:54:02 UTC
On long lists autonumbering table rows means sorting any column takes longer. Around a couple seconds to sort a column 800 rows long. This is true whether using the easy CSS method or the hard CSS method (with every cell manually added in).

I link to an example below of a table with around 800 rows. 

With autonumbering:
http://cannabis.shoutwiki.com/w/index.php?title=GMMcities&oldid=6398 
Table from above-linked old revision has been copied to this sandbox after converting to the easy CSS method: 
http://cannabis.shoutwiki.com/wiki/User:Timeshifter/Sandbox_4

Same table without autonumbering sorts faster:
http://cannabis.shoutwiki.com/wiki/User:Timeshifter/Sandbox_5 

The initial click takes a couple seconds in all cases. Click again. 

I haven't been able to find a working JS method of autonumbering. Can someone link to a table with JS doing the autonumbering. I want to see how fast it is. 

I have not seen any JS tables linked from previous comments that work for me. Please point me to working JS I can copy to Shoutwiki, or to my personal user JS on a wiki. So I can test it on some tables.
Comment 24 Bartosz Dziewoński 2014-04-29 18:02:56 UTC
*** Bug 10433 has been marked as a duplicate of this bug. ***
Comment 25 Timeshifter 2014-05-15 15:24:11 UTC
In comment 18 I linked to a row-numbered sortable table in a page that no longer has that table. I copied the table from an old revision of the page to this sandbox: 
http://cannabis.shoutwiki.com/wiki/User:Timeshifter/Sandbox_10 
This table has 168 rows. Sorting is not slowed down by the auto numbering. 

The auto numbering CSS used is found here: 
http://cannabis.shoutwiki.com/wiki/MediaWiki:Common.css 
CSS is in the section titled "Easy method of auto numbering of table rows".

As I said previously (comment 23) sorting a table with 779 rows is slowed down by the addition of auto numbering: 
http://cannabis.shoutwiki.com/wiki/User:Timeshifter/Sandbox_4
Comment 26 Michael M. 2014-09-24 07:52:04 UTC
(In reply to Bartosz Dziewoński from comment #20)
> 1. Obviously, no support for old browsers. I understand that this is a
>    trade-off that we're willing to make.

According to http://caniuse.com/#feat=css-counters the CSS solution even works in IE8, and because IE7 and below are now grade C, a JS solution can't reach a greater level of support anyway.

I doubt that there is great support for CSS Counter Styles Level 3 yet, but at least most of the stuff from Predefined Counter Styles should be supported, so localization up to the level it is done for ordered lists ([1]) should be possible.

[1] https://git.wikimedia.org/blob/mediawiki%2Fcore.git/902f90a123bef85cfaf2b206c51a89ffdd416674/resources%2Fsrc%2Fmediawiki.legacy%2Fshared.css#L935

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links