Ticket #10809 (closed PLIP: fixed)
Table sort internationalization
Reported by: | thomasdesvenain | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | 4.1 |
Component: | JavaScript | Version: | |
Keywords: | dates, sort, table, listing | Cc: | vincentfretin, plip-advisories@… |
Description (last modified by thomasdesvenain) (diff)
Proposer: Thomas Desvenain
Seconder: Vincent Fretin
Motivation
table_sorter.js sort algorithm makes sort by dates working only with english format dates. Project that uses non-english-format dates (french one for example, where dates are in a dd/mm/yyyy format) needs to customize each time table_sorter.js
This improvement should also provide a solution for making data sortable by dates in any format (such as "Monday 1st, June, 2010") without any javascript customization, and through a standard way.
There are many other contexts where we can't sort using simple generic javascript sort, and we want it without having to sort on server side :
- texts with 'special' characters (accents, non ascii characters)
- number formats (as 1,000 for 1000, etc, etc) and units (1 Giga > 1 Mega)
Assumptions
This is only about sortable tables with "listing" class binded with table_sorter.js code.
Proposal & Implementation
User that develops table code may add an information into the html code of the cell (a class on td for example) that contains the value in a sortable format (for dates, probably like iso YYYY-MM-DDThh:mm:ss, YYYY-MM-DD, etc) and the sort machinery (table_sorter.js code) should use this information if it exists. I suggest developper can add a class prefixed by "sort-" : <td class="sort-sortablevalue"> as for example : <td class="sort-2010-03-04">Le 4 mai 2010</td>, <td class="sort-aepfel">äpfel</td> <td class="sort-1000">1,000 times</td> <td class="sort-1000">1 MB</td> <td class="sort-1000000">1 GB</td>
for dates, using iso format : http://www.iso.org/iso/fr/support/faqs/faqs_widely_used_standards/widely_used_standards_other/date_and_time_format.htm
Deliverables
What code and documentation needs to be produced? Standard items:
- Unit tests
- Documentation
Risks
columns with new html content have to work with old table_sorter.js columns with new html content have to work with kss server side sort
Participants
Thomas Desvenain
Progress
No
Change History
comment:3 Changed 6 years ago by hannosch
This sounds great, we wanted this for a long time ;)
One suggestion, though: I'd make the class attribute inside the HTML a bit more generic. Instead of the "datetime-" prefix, I'd use something like "sort-". That way the JavaScript code should be able to do a simple sort on this for other types of data.
For example: 1,000 ("sort-00001000"), 101 ("sort-00000101"), äpfel ("sort-aepfel", tønsberg ("tonsberg"). The PLIP doesn't have to handle the server side code for producing those representations for things other than dates. But it'd be nice if the same JavaScript code could be used for it.
comment:5 Changed 6 years ago by thomasdesvenain
- Description modified (diff)
i generalized it as you suggested and added your examples, plus sort by sizes example.
comment:6 Changed 6 years ago by ldr
HTML5's custom data attribute provides for this sort of thing. Instead of setting it on a class, we'd use a data-sortorder="00001000" attribute. This should be fully backwards compatible.
(There's also HTML5's time element datetime attribute but I think we're better off sticking to sorting here)
comment:7 Changed 6 years ago by rossp
- Summary changed from PLIP : table sort internationalization to Table sort internationalization
Fix the title
comment:8 Changed 6 years ago by esteele
Your PLIP has been accepted for consideration for Plone 4.1.
Framework Team voting on this PLIP was: Alec +1 Craig +1 Elizabeth +1 Laurence -- Martijn +1 Matthew +1 Rob +1 Ross --
The initial implementation deadline for your PLIP is October 1st, 2010. The Framework Team would certainly appreciate you finishing beforehand so that they may begin evaluating it as soon as possible. Announce its readiness here once your implementation is ready for review.
comment:10 Changed 6 years ago by thomasdesvenain
- Status changed from new to closed
- Resolution set to fixed
I implemented the feature and a fix in https://svn.plone.org/svn/plone/Plone/branches/plip10809-improve-tablesorter (use https://svn.plone.org/svn/plone/buildouts/plone-coredev/branches/4.1/plips/plip10809-improve-tablesorter.cfg buildout conf)
I used sortabledata-xxx for naming.
I could'nt write unit tests (using test_ecmascripts) because of general architecture of table_sorter.js. i don't know how to run javascript initialization (using coding style : (function($) {code})(jQuery) in ecmascript tests environment... If you can help.
I tried this code using this example page template in custom : <html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en-US"
lang="en-US" metal:use-macro="here/main_template/macros/master" i18n:domain="plone">
<body>
<metal:content-core fill-slot="content-core"> <table class="listing">
<thead>
<tr>
<th>Title</th> <th>Number</th> <th>Date</th> <th>Size</th> <th>Author</th> <th>Old number</th>
<th>Old name</th>
</tr>
</thead> <tbody>
<tr>
<td class="sortabledata-mytitle1">my title 1</td> <td class="sortabledata-3">Trois</td> <td class="sortabledata-2011-01-09">4th setpember, 2011</td> <td class="sortabledata-1000">1 Kb</td> <td class="emphasize sortabledata-soren">Jørgen</td> <td>5</td> <td>bleu</td>
</tr> <tr>
<td class="sortabledata-mytitle3">MY TITLE 3</td> <td class="sortabledata-12">12</td>
<td class="sortabledata-2010-05-09">5 septembre 2010</td>
<td class="emphasize sortabledata-1000000">1 Gb</td> <td class="sortabledata-elise">Élise</td> <td>21</td> <td>blanc</td>
</tr> <tr>
<td class="emphasize sortabledata-mytitle2">My Title 2</td> <td class="sortabledata-7">VII</td>
<td class="sortabledata-2010-05-12">05/12/2010</td>
<td class="sortabledata-10">10 bytes</td> <td class="sortabledata-jose">José</td> <td>8</td> <td>rouge</td>
</tr>
</tbody>
</table> </metal:content-core>
</body>
</html>
comment:11 Changed 6 years ago by thomasdesvenain
- Status changed from closed to reopened
- Resolution fixed deleted
comment:12 Changed 5 years ago by thomasdesvenain
Implementation done, ready for review
comment:13 Changed 5 years ago by robgietema
comment:14 Changed 5 years ago by eleddy
comment:15 Changed 5 years ago by esteele
- Status changed from reopened to closed
- Resolution set to fixed