Implement client-side sorting of table fields with JavaScript
Closed, ResolvedPublic

Description

Author: avarab

Description:
I've been toying with sorttable from kyogenix.org (under the MIT Licence) which
would display little arrows on table header fields which when clicked on would
sort the table according to that particular field (see the attached testcase).

There are some troubles with it however, it only sorts the table if it's
declared with id="unique_id" (no other element can have it) and
class="sorttable", it should preferably be modified so as to not require id=""
or the sorttable class so that it could be used for all tables.

Known bugs:

  • Doesn't work for all input, numbers like "1,100" and "99" in the same column

will not get sorted correctly

  • Links within the table headers will not get displayed (this is unacceptable)

I stopped working on this some time ago, posting it here as a feature request in
case somebody wants to finish it.


Version: 1.5.x
Severity: enhancement
URL: http://www.kryogenix.org/code/browser/sorttable/

Details

Commits
Unknown Object (Diffusion Commit)
Reference
bz2001
bzimport set Reference to bz2001.
bzimport created this task.Apr 28 2005, 5:04 AM

avarab wrote:

Sorttable testcase

Attached: sort.html

avarab wrote:

sorttable.js

The sorttable.js file, to get it working add something like:

document.write('<script type="text/javascript"
src="/skins/common/sorttable.js"></script>');

To /skins/common/wikibits.js, to make a table sortable do something like:

{| id=foo class=sortable
! one
! two

-
a
b
-
2
1
}
NOTE: I made a spelling error in my first post, it's class=sortable not class=sorttable

attachment sorttable.js ignored as obsolete

avarab wrote:

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

arthit wrote:

will it going to support internationalization ? thanks.

commited to cvs.

i18n for numeric sorting can probably be achieved by getting
the "lang" attribute for the html tag and then rely on this
to set the javascript i18n.

(In reply to comment #5)

commited to cvs.

i18n for numeric sorting can probably be achieved by getting
the "lang" attribute for the html tag and then rely on this
to set the javascript i18n.

The recent change of Hashar has a negative side-effect:

on the user-login page, the username field is now corrupted.

[1]
http://cvs.defau.lt/cvsweb.cgi/phase3/skins/monobook/main.css.diff?r1=1.44&r2=1.45&f=h

avarab wrote:

(In reply to comment #6)

(In reply to comment #5)
The recent change of Hashar has a negative side-effect:
on the user-login page, the username field is now corrupted.

That change got reverted, see the next diff [0], please clear your cache.

0 :
http://cvs.defau.lt/cvsweb.cgi/phase3/skins/monobook/main.css.diff?r1=1.45&r2=1.46&f=h

brion added a comment.Jul 15 2005, 4:32 AM

Caused bug 2866; I've backed out the patch for now.

lupin.wp wrote:

sorttable.js with fix from bug 2866

I've applied the fix mentioned in bug 2866. I believe this should work properly
now.

attachment sorttable.js ignored as obsolete

lupin.wp wrote:

improved version of sorttable.js

This is an improved version of sorttable.js. I have cleaned up the code
somewhat, and removed the need to add an id manually, so the following should
work:

{|class=sortable
!foo
!bar
!baz
!quux

-
1
z
$12.32
£23
-
2
a
$12000
£1
}

I think that only applying this to tables with class=sortable is a good thing
though, since not every table needs these funny blue arrows.

This uses the addOnloadHook function defined in wikibits.js instead of the
older code which was causing problems.

Attached: s.js

lupin.wp wrote:

patch to MonoBook.php to install this script

This patch installs the sorttable script for monobook users. I don't know if
this is the cleanest way to do it, though.

attachment s2 ignored as obsolete

lupin.wp wrote:

patch to MonoBook.php to install this script

This patch installs the sorttable script for monobook users. I don't know if
this is the cleanest way to do it, though.

attachment s2 ignored as obsolete

david.bjorklund wrote:

Wow. This seem cool!

Is this still being considered for inclusion?
And how do you do with multiple classes? eg.
{| class="wikitable"

ayg wrote:

class="wikitable sortable"

davidkernow wrote:

(In reply to comment #12)

Created an attachment (id=1434) [edit]
patch to MonoBook.php to install this script

This patch installs the sorttable script for monobook users. I don't know if
this is the cleanest way to do it, though.

Okay, php know-nothing here: How do I "patch to monobook.php to install"
sorttable - create a "User:David Kernow/monobook.php" file on (say) Wikipedia
with the attachment as its content...? (Thought I ought to ask before making a
mess!) Thanks, David.

ayg wrote:

(In reply to comment #15)

Okay, php know-nothing here: How do I "patch to monobook.php to install"
sorttable - create a "User:David Kernow/monobook.php" file on (say) Wikipedia
with the attachment as its content...? (Thought I ought to ask before making a
mess!) Thanks, David.

You can't. The patch has to be applied to the actual software, which obviously
users can't directly access. You could include a version of it in "User:David
Kernow/monobook.js" by copy-pasting from the attachment on comment #10 (or using
document.write), but it wouldn't do much unless you also added class="sortable"
to various tables (or removed that condition).

davidkernow wrote:

(In reply to comment #16)

You could include a version of it in "User:David
Kernow/monobook.js" by copy-pasting from the attachment on comment #10 ...
but it wouldn't do much unless you also added class="sortable"
to various tables (or removed that condition).

Thanks, Simetrical! Have pasted the sorttable.js code from comment #10 into my
monobook.js file on Wikipedia and, switching a class=wikitable table to
class="wikitable sortable", have already found that (understandably) it assumes
a table's headers are limited to the first row. Presumably a "wikitable
sortable" table will appear as a "wikitable" table to anyone browsing without
sorttable.js installed...? Thanks again, David.

ayg wrote:

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

ayg wrote:

Patch to conditionally add sorttable

Okay, this patch will include sorttable.js only if a table on the page actually
has a table with class sortable, so no extra 6 KB per page load. I don't
anticipate any problems with this kind of conditional inclusion. If there are
no objections, I'll commit this in a few days.

(Note that Lupin's modifications didn't work for me, so I just used the
original with the no-id-needed workaround.)

Attached: 2001.patch

ayg wrote:

Applied in r17803.

jackdt wrote:

At
http://en.wikipedia.org/w/index.php?title=List_of_countries_by_murder_rate&oldid=91593901
sorting by 1998 is correct ... 1.69 2.10 ...
Reverse sorting by 1998 is by string instead of numerical: ... 2.10 19.61 ...
instead of ... 2.10 1.69 ...

Sorting by 2000 is correct, including the zero padded 2.02: ... 1.81 02.02 2.05 ...
Reverse sorting by 2000 is also correct.

Sorting 2003 is mostly correct ... 1.97 02.04 2.13 ..., only problem are the two
0s not below all the nulls.
Reverse sorting 2003 is incorrect (string): ... 2.13 15.10 ... 1.04 02.04 0.99

Sorting 2004 is pretty random, but that may be because there are certain table
blocks not defined.

ayg wrote:

Open a new bug, please.

davidcraig5 wrote:

Added bug 8115 for #21's comment

info wrote:

For what it's worth, I like the presentation of table sorting in Semantic
MediaWiki 0.6 extension better than the arrows in
http://en.wikipedia.org/w/index.php?title=List_of_countries_by_murder_rate&oldid=91593901
See e.g. http://ontoworld.org/wiki/Category:Country , it uses icons for
sort_up/down/none.
The SMW sort code is derived from http://www.kryogenix.org/code/browser/sorttable/

ayg wrote:

I like your suggestion and added it in r18178, but please open new bugs for
future related requests. This bug is fixed.

epriestley added a commit: Unknown Object (Diffusion Commit).Mar 4 2015, 8:24 AM

Add Comment