jquery.tablesorter: Add support for a "fixed" column
OpenPublic

Description

Author: winne2i

Description:
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

-
1whiteJohnNew York
-
2greenAliceWarsaw
-
3blackMarkRennes
}

Version: unspecified
Severity: enhancement

Attached:

bzimport added a project: MediaWiki-JavaScript.Via ConduitNov 22 2014, 12:49 AM
bzimport added a subscriber: Unknown Object (MLST).
bzimport set Reference to bz40618.
bzimport created this task.Via LegacySep 29 2012, 3:46 PM
Ciencia_Al_Poder added a comment.Via ConduitSep 29 2012, 3:53 PM

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]

bzimport added a comment.Via ConduitSep 29 2012, 6:59 PM

winne2i wrote:

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.

Ciencia_Al_Poder added a comment.Via ConduitSep 29 2012, 7:52 PM

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.

matmarex added a comment.Via ConduitSep 29 2012, 8:00 PM

(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?

bzimport added a comment.Via ConduitSep 29 2012, 8:23 PM

winne2i wrote:

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

matmarex added a comment.Via ConduitSep 29 2012, 8:26 PM

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.

bzimport added a comment.Via ConduitSep 29 2012, 9:05 PM

winne2i wrote:

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.

Krinkle added a comment.Via ConduitSep 30 2012, 12:25 AM

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.

bzimport added a comment.Via ConduitSep 30 2012, 12:43 AM

winne2i wrote:

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.

Krinkle added a comment.Via ConduitSep 30 2012, 12:45 AM

(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.

bzimport added a comment.Via ConduitSep 30 2012, 1:15 AM

winne2i wrote:

(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.
matmarex added a comment.EditedVia ConduitDec 26 2012, 4:48 PM

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

bzimport added a comment.Via ConduitDec 26 2012, 10:33 PM

winne2i wrote:

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!

matmarex added a comment.Via ConduitDec 31 2012, 3:19 PM
  • Bug 40634 has been marked as a duplicate of this bug. ***
Timeshifter added a comment.EditedVia ConduitJan 1 2013, 9:57 AM

*** T4315 has been marked as a duplicate of this bug. ***

Timeshifter added a comment.EditedVia ConduitJan 1 2013, 10:26 AM

I am not sure if T4315 and T12433 are resolved duplicates of this. I marked T4315 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.

T12433 offers some automatic numbering JS that does this:
https://en.wikipedia.org/wiki/User:Mike_Dillon/Scripts/autonumber.js

via class="wikitable autonumber"

The example given at T12433 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 T12433 the original poster's user page has moved to here:
https://en.wikipedia.org/wiki/User:Joseph_A._Spadaro

The table wikitext he provided in T12433 produces this:
http://en.wikipedia.org/wiki/User:Timeshifter/Sandbox29

Yair_rand added a comment.Via ConduitMar 31 2014, 5:30 AM

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;
}
Timeshifter added a comment.EditedVia ConduitApr 1 2014, 3:40 PM

(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 table on this page:
*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:

  • [Removed incorrect link]

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.

bzimport added a comment.Via ConduitApr 2 2014, 11:10 AM

winne2i wrote:

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.

matmarex added a comment.Via ConduitApr 2 2014, 6:51 PM

(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.
  1. 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).

matmarex added a comment.Via ConduitApr 2 2014, 6:55 PM

(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/.

bzimport added a comment.Via ConduitApr 2 2014, 7:30 PM

winne2i wrote:

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?)

Timeshifter added a comment.Via ConduitApr 2 2014, 11:54 PM

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.

matmarex added a comment.Via ConduitApr 29 2014, 6:02 PM
  • Bug 10433 has been marked as a duplicate of this bug. ***
Timeshifter added a comment.Via ConduitMay 15 2014, 3:24 PM

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

Schnark added a comment.Via ConduitSep 24 2014, 7:52 AM

(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

MZMcBride added a subscriber: MZMcBride.Via WebJan 4 2015, 4:48 AM
Krinkle removed a subscriber: Krinkle.Via WebJan 5 2015, 6:18 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptVia HeraldTue, Aug 18, 2:01 PM
Timeshifter added a comment.EditedVia WebTue, Aug 18, 4:27 PM

Is there any reason this can not be implemented right now? I will be adding row numbering to dozens of tables right away when this is implemented. Once I do so, I am sure it will be immediately added to hundreds more tables as others see how easy it is to add something like
class="wikitable sortable rownumbers"

See Help:Sorting to see how convoluted it is to add row numbers now without a class for it:
https://en.wikipedia.org/wiki/Help:Sorting
https://en.wikipedia.org/wiki/Help:Sorting#Auto-ranking_or_adding_a_row_numbering_column_.281.2C2.2C3.29_next_to_a_table
See also the talk page and this current thread (before it goes to the talk archive):
https://en.wikipedia.org/wiki/Help_talk:Sorting#Accessibility_issues_when_implementing_.22rank.22_in_a_separate_table

gerritbot added a subscriber: gerritbot.Via ConduitFri, Aug 28, 7:46 AM

Change 234473 had a related patch set uploaded (by Gerrit Patch Uploader):
Add class mw-autonumber for tables

https://gerrit.wikimedia.org/r/234473

gerritbot added a project: Patch-For-Review.Via ConduitFri, Aug 28, 7:46 AM
MatthiasDD added a subscriber: MatthiasDD.Via WebSun, Aug 30, 9:49 PM

A good patch, it works good for ltr- and rtl-direction. But why starts the classname with mw- ? I suggesst use of "autonumber" instesd "mw-autonumber". Every user read this HTML-code in the wiki-editor. It should be simple and short. For the counter i suggest use of "row":

table.autonumber tr td:first-child:before {

counter-increment: row;
content: counter(row);
}

Schnark added a comment.Via WebMon, Aug 31, 8:15 AM

But why starts the classname with mw- ? I suggesst use of "autonumber" instesd "mw-autonumber".

To avoid clashes with classes added to MediaWiki:Common.css, e.g. T42618#434098.

matmarex added a comment.Via WebMon, Aug 31, 6:09 PM

Hmm, "autonumber" might be better in this case for consistency with existing classes from this script (like "sortable") and since the script aspires not to be MediaWiki-dependent.

Timeshifter added a comment.EditedVia WebTue, Sep 1, 12:03 AM

I prefer simplicity. There is no great need for "mw" in front of the class name. I have no problem with "autonumber", "rownumber", or just "rows". Or anything else without "mw" in front of it.

I doubt too many people other than me used the old class=autonumber CSS provided by Yair_rand higher up in this thread.

See:
http://cannabis.shoutwiki.com/wiki/MediaWiki:Common.css

It has the Yair_rand CSS for easy autonumbering used on these pages:
http://cannabis.shoutwiki.com/wiki/User:Timeshifter/Sandbox_10
http://cannabis.shoutwiki.com/wiki/User:Timeshifter/Sandbox_4
http://cannabis.shoutwiki.com/wiki/2013list

By changing to the latest Mediawiki class name those pages will still work when the mediawiki software used on Shoutwiki incorporates the new automatic row numbering class. I can then delete the old Yair_rand CSS for autonumbering from MediaWiki:Common.css on that Shoutwiki wiki.

Schnark added a comment.Via WebTue, Sep 1, 7:29 AM

You almost convinced me to drop the "mw-" prefix, but then I noticed, that autonumber is already in use for autonumbered external links. This shouldn't be a problem if everything is done right, as in one case the class is on an <a>, in the other case on a <table> element, but you never know with what expectations users added rules for .autonumber to their personal CSS. Also note that there is a class mw-datatable which is used on tables in wiki content, too, so the "mw-" prefix isn't my invention.

Of course I'm open to arguments against my concerns and other suggestions, the currently proposed patch won't be the last one.

Timeshifter added a comment.EditedVia WebTue, Sep 1, 6:43 PM

What about using "rownumber"? Is that in use on Wikipedia, or other wikis?

"mw-" is used for mw-collapsible and mw-collapsed on Wikia:
*http://community.wikia.com/wiki/Help:Collapsing

But not on Wikipedia:
*https://en.wikipedia.org/wiki/Help:Collapsing

A side note. I noticed that the numbeo.com site uses fixed row numbering on most of their many sortable tables:
*http://www.numbeo.com - for example:
*http://www.numbeo.com/crime/rankings_by_country.jsp - the rank column.

TheDJ added a subscriber: TheDJ.Via WebTue, Sep 1, 7:19 PM

Hmm, i still find the whole feature somewhat confusing:

Deployed here:
https://test.wikipedia.org/wiki/User:TheDJ/T42618

And it's still purely a stylistic effect, that will rely on people still fixing the fallback values, which of course they won't...

And the whole initial premise of it being 'confusing' that the numbers follow the sort state, is rather an arbitrary valuation as well. I find it confusing if they don't follow the sorting actions personally. I don't know. I'm still not enthusiastic.

Timeshifter added a comment.Via WebTue, Sep 1, 8:39 PM

https://test.wikipedia.org/wiki/User:TheDJ/T42618

And the whole initial premise of it being 'confusing' that the numbers follow the sort state, is rather an arbitrary valuation as well. I find it confusing if they don't follow the sorting actions personally. I don't know. I'm still not enthusiastic.

I suggest that the patch remove the sorting icon from the rank column. Then people are more likely to figure out that the rank column is not supposed to sort, nor change at all. The patch needs to add the "unsortable" class to the rank column header. See how here:
*https://en.wikipedia.org/wiki/Help:Sorting#Making_a_column_unsortable

Timeshifter added a comment.EditedVia WebTue, Sep 1, 9:10 PM

It seems that the patch does not create a column for the row numbers? Why not?
*https://test.wikipedia.org/wiki/User:Timeshifter/Sandbox2

Add Comment