Contents

  1. Sortable Tables
    1. CSS Parser
    2. Sorting with sorttable
  2. Discussion
    1. IE8 Problems
    2. Data Browser Widget
    3. Table Sorting JavaScript
      1. Feedbacks
    4. ImprovedTableParser
    5. MoinMoin 2.0

Sortable Tables

Short description

Tables are very useful for displaying information in a concise way. What often can be useful is sorting of tables which to my knowledge isn't possible with MoinMoin. Since this feature could certainly be useful for most users.

Hint: MediaWiki adds a sorting feature to tables via a JavaScript (see http://meta.wikimedia.org/wiki/Help:Sorting).

CSS Parser

Sorting with sorttable

sorttable is a piece of JavaScript that will make tables sortable by clicking on their headers.

To use it, apply these patches:

This does not make all tables sortable; it integrates with the databrowser widget. Only columns that are marked sortable in the dataset's columns list will become sortable.

Current issues:

Discussion

If the sorttable.js is appended to common.js it does always load once per page. You have to set then only <tableclass="sortable"> e.g. 

||<tableclass="sortable">Name ||email ||irc ||

IE8 Problems

If this is used on an SSL site, the following code will cause a popup security warning on every page. 

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
    document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
    var script = document.getElementById("__ie_onload");
    script.onreadystatechange = function() {
        if (this.readyState == "complete") {
            sorttable.init(); // call the onload handler
        }
    };
/*@end @*/

The problem is the src=javascript:void(0). Replace it with src="dummy.html" to avoid the security warning message.

A second problem is IE8 sometimes fails -- clicking on a sorttable heading does nothing. There are no errors on page load and no errors after clicking the heading. The problem has occurred on two PCs using IE8 under Windows/7. Reloading the page may clear the problem.

The problem is in this same code: 

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
    document.write('<script id=__ie_onload defer src="dummy.html"><\/script>');
    var script = document.getElementById("__ie_onload");
    script.onreadystatechange = function() {
        if (this.readyState == "complete") {
            sorttable.init(); // call the onload handler
        }
    };
/*@end @*/

The code is trying to call sorttable.init as soon as the DOM is complete but before the web page has completely finished loading. This may be useful when large images or other slow loading elements are included on a page with sortable tables. Without the early initialization, the user may see the partially loaded page with the sortable table and be will able to interact (click on a heading) before the slow loading elements are complete.

In tests with IE 8, the script.onreadystatechange is usually fired twice, first yielding "complete", and then "loaded". The "complete" status fires the init function; but sometimes the following code within init does not find any sorttable tables. 

    forEach(document.getElementsByTagName('table'), function(table) {
      if (table.className.search(/\bsortable\b/) != -1) {
        sorttable.makeSortable(table);
      }
    }

One workaround is to delete or comment out the entire Internet Explorer specific code. All versions of IE will then run sorttable init when everything is loaded. 

/* for other browsers */
window.onload = sorttable.init;

The long term hope is IE9 will provide a reliable way to test for the completion of the DOM. Hopefully, it will be the same way as Firefox and Opera. 

/* for Mozilla/Opera9 */
if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", sorttable.init, false);
}

-- -- RogerHaase 2010-01-18 18:40:12

Data Browser Widget

By http://hg.moinmo.in/moin/1.9/rev/78f1be3c8777 introduced to do sortings by the data browser widget.

Table Sorting JavaScript

Here is my solution, tested for Chromium 5.0, Firefox 3.6.8 under Linux, Windows with Firefox 3.6, Safari 4.0 and Internet Explorer 8.0. It using the same javascript as mentioned above "sortable.js". I made this, 'coz I couldn't apply the patch from reimar with my latest 1.9.x installation, thats why here a short explanation how I did it:

Download the js and images from http://yoast.com/articles/sortable-table/#download (or here sortable.zip)

Move the sortable.js into the common js directory: 

/MoinMoin/web/static/htdocs/common/js/

Put the images to the common directory 

/MoinMoin/web/static/htdocs/common/

edit sortable.js and change this variable to: 

   1 var image_path = "/moin_static193/common/";
   2 var image_up = "arrow-up.gif";
   3 var image_down = "arrow-down.gif";
   4 var image_none = "arrow-none.gif";

don't forget to integrate the javascript sortable.js into your theme, I just edit my config file (e.g. wikiconfig.py) and add this: 

   1     html_head = '''
   2 <script type="text/javascript" src="%(url_prefix_static)s/common/js/sortable.js"></script>
   3     ''' % {"url_prefix_static": url_prefix_static}

because the gui editor will forget a custom attribut like tableid you need to add this patch to your "text_html_text_moin_wiki.py" file. But be aware this is not heavy tested (only with latest 1.9.3 release), so no idea if there are any minor side effects hanging around... 

   1 --- MoinMoin/converter/text_html_text_moin_wiki.py    2010-08-31 23:09:36.176215107 +0200
   2 +++ MoinMoin/converter/text_html_text_moin_wiki.py    2010-09-08 22:53:14.873040813 +0200
   3 @@ -1036,6 +1036,8 @@
   4              result.append('tablestyle="%s"' % node.getAttribute("style"))
   5          if node.hasAttribute("class"):
   6              result.append('tableclass="%s"' % node.getAttribute("class"))
   7 +        if node.hasAttribute("id"):
   8 +            result.append('tableid="%s"' % node.getAttribute("id"))
   9          return " ".join(result).strip()
  10 
  11      def _row_style(self, node):

now you just need to add the class sortable and some id to your table, to enable the sorting feature, for example: 

||<tableclass="sortable" tableid="myuniqueid"> Surename || Lastname ||
|| Lee                                                  || Paul     ||
|| John                                                 || Deer     ||
|| Peter                                                || Parker   ||

Infos:

Be aware, the last update of this javascript is 2007, and future MoinMoin Version will be for sure using some jquery stuff. so this stuff will maybe not work with the upcoming moin 2.0.

Demo

http://rock.heavy.ch/Administration/Projekt/Ideen

Author

-- MarcelHäfner 2010-09-07 21:26:37

Feedbacks

  var i = 0;

...

ImprovedTableParser

The ImprovedTableParser provides sortable tables, although the syntax is not quite the same as the classic Moin table syntax (it's slightly more flexible). -- PaulBoddie 2013-02-05 22:43:18

MoinMoin 2.0

<dreimark>  moin-2.0 has jquery which can bes used for table sorters but widget table will need a rewrite there and jquery modules for sorting aren't implemented yet too

CategoryFeatureRequest

MoinMoin: FeatureRequests/SortableTables (last edited 2013-02-05 22:43:19 by PaulBoddie)