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: wikibugs-l.
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.Via 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. ***
bzimport added a comment.Via ConduitJan 1 2013, 9:57 AM

zedlightman wrote:

*** Bug 2315 has been marked as a duplicate of this bug. ***

bzimport added a comment.Via ConduitJan 1 2013, 10:26 AM

zedlightman wrote:

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]]

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

zedlightman wrote:

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

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

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

zedlightman wrote:

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. ***
bzimport added a comment.Via ConduitMay 15 2014, 3:24 PM

zedlightman wrote:

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

Add Comment

Column Prototype
This is a very early prototype of a persistent column. It is not expected to work yet, and leaving it open will activate other new features which will break things. Press "\" (backslash) on your keyboard to close it now.