sortablejs plugin

This plugin adds a JavaScript, which can be used to create sortable tables in other plugins. It is optional for linkmanager plugin.

After installing the plugin you should make sure that your DokuWiki cache is updated. This can easily be done by changing any parameter value in settings (or by doing a touch conf/local.php).

You need to set <sortable> and </sortable> tags around your table.

<sortable>
^Col1^Col3^Col3^
|1|one|25/12/2008|
|2|two|10/12/2008|
</sortable>

Table initially sorted by column 1

<sortable 1>
^Col1^Col3^Col3^
|1|one|25/12/2008|
|2|two|10/12/2008|
</sortable>

Table initially reverse sorted by column 1

<sortable r1>
^Col1^Col3^Col3^
|1|one|25/12/2008|
|2|two|10/12/2008|
</sortable>

To sort the columns you (the page viewer) just needs to click on the correct column on the first row. A second click on the same column reverses sort.

• When having multiple tables in one page, the up/down arrow is not displayed correctly on all tables. Only on the last table sorted.
• The arrow is not displayed by default, so impossible to make the difference between sortable and normal table

Please feel free to report more found bugs or suggestions. — Otto Vainio 2009/01/14 10:16

• Version 1.1 fixes a JavaScript error with IE. Thanks Ulrich — Otto Vainio 2008/03/12 04:47
• Version 2.0 adds possibility to use this script in all tables. Just add <sortable> before and </sortable> after your table.
• Version 2.1 Changed one line in script.js to allow multiple sortable tables in same page
• Version 2.2
  • Fixed usage of event registering to be more compatible with DokuWiki. Now also code plugin should work correctly.
  • A table can now be initially sorted bu setting the column number (starting from 0) in the <sortable> tag. Reverse sort by setting an r before the column number. <sortable 1> and <sortable r1>
• Version 2.2a Fixed some jslint error which caused CSS+JavaScript compress to break.
• Version 2.3 adds support for odt plugin. (Thanks Aurélien Bompard) Unfortunately the sort order in page source is used. It is not possible to output the new sort order.

• When the <sortable> tag is added, all tables on the page are made sortable. When two sortable tags are defined, ascending sorting will not occur anymore. Both are caused by an error in the JavaScript: The makeSortablediv function gets all table elements from the document instead of from the DIV.
  • Solution: Change line 77 document.getElementsByTagName('table') to div.getElementsByTagName('table') — Hans Sampiemon 2008/11/27 12:26
• Thanks for the report. This is now fixed in the new (2.1) version. — Otto Vainio 2008/11/27 13:10
• I got this working and it is very nice. I would like to have the ability to sort tables a certain way by default. I tried to hack something in there by putting some JavaScript in when the table header was created, but I don't think I was getting the timing right. If you are working on this any more, it would be a handy addition.
• I am also looking for the ability to sort tables a certain way by default. Would be nice if you could add this.
• I will also put in my 2 cents and say it would be fantastic if there was a default sort.

—-

• The pagelist plugin can generate tables with a creation date or a modification date. Typically this date will be in format “DD-MM-YYYY HH:MM”. The script doesn't recognize this as a date field. For universal usage, using $conf['dformat'] as the format recognized would be the perfect solution. — Hans Sampiemon 2008/11/27 14:26

Actually I think the script has a even better solution. It tries to guess the date format. The current version only understands following dates

If the date is something, where it is impossible to guess the format (dd-mm or mm-dd) like 3-3-2003, then it assumes dd-mm.

I have a new version (not yet released), which understands hh:mm after the date… should probably add . (comma) as a time separator also. — Otto Vainio 2008/11/27 17:59

Although I understand why you would like the ultimate flexibility, I wonder if it is really needed. Whereas dates are quite common, timestamps are very rarely entered by humans. Generally they will be computer generated and if the are, you would expect them in the format defined by $conf['dformat']. — Hans Sampiemon 2008/12/01 15:06

This script is originally built by Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/ I have only changed it to work with DokuWiki.(and some small changes). It had these date formats build in. I think it would require more changes to make it to recognize a PHP variable in JavaScript. It can be done, but… — Otto Vainio 2008/12/01 17:03

And one more thing. Handling $conf['dformat'] would require to code a parser to handle strftime format — Otto Vainio 2008/12/01 17:25

• If a cell is empty, the column that contains that cell will not allow sorting. — Josef Rovira 2008/12/12

I test the sortable.js, and found some errors.

Mixing of Types don't work.

^Test1  ^
|BB    |
|      |
|10    |
|      |
|AA    |
|      |
|DD    |

After this, no table can by sorted anymore.

^Test2  ^Test2  ^
|BB    |BB    |
|AA    ||

(If possible, could by useful to sort, sort-down > sort-up > no-sort …)

I would still call these features… — Otto Vainio 2009/01/28 15:26

Quick and dirty fix for mixed Formats in Columns: The Problem is, that the plugin will use a numeric sort if there is only one cell that has only numers in it. The following code will cause the plugin to only use the numeric sorting if all columns are numeric. Additionally, this code will enable the sorting of dates, which use a point as delimiter instead of a /

guessType: function(table, column) {
    // guess the type of a column based on its first non-blank row
    sortfn = sorttable.sort_alpha;
    for (var i=0; i<table.tBodies[0].rows.length; i++) {
      text = sorttable.getInnerText(table.tBodies[0].rows[i].cells[column]);
      if (text !== '') {
        // check for a date: dd/mm/yyyy or dd/mm/yy 
        // can have / or . or - as separator
        // can be mm/dd as well
        possdate = text.match(sorttable.DATE_RE);
        if (possdate) {
          // looks like a date
          first = parseInt(possdate[1]);
          second = parseInt(possdate[2]);
          if (first > 12) {
            // definitely dd/mm
            return sorttable.sort_ddmm;
          } else if (second > 12) {
            return sorttable.sort_mmdd;
          } else {
            // looks like a date, but we can't tell which, so assume
            // that it's dd/mm (English imperialism!) and keep looking
            sortfn = sorttable.sort_ddmm;
          }
        }
      }
    }
    if ( sortfn == sorttable.sort_alpha )
    {
	    for (var i=0; i<table.tBodies[0].rows.length; i++) {
	      text = sorttable.getInnerText(table.tBodies[0].rows[i].cells[column]);
	      if (text !== '') {
	        if (text.match(/^-?[£$€]?[\d,.]+%?$/)) {
		        sortfn = sorttable.sort_numeric;
	        }
	        else
	        	return sorttable.sort_alpha
	      }
    	    }
    }
    return sortfn;
  },

• It would be great if the plug-in could sort links using their description and not their href. I tried something like .replace(/<a .*?href=”.*?”.*?>(.*?)<\/a>/,'$1') in getInnerText function but failed in finding the right place for it. — djib 2009/02/19 14:36

The following table doesn't seem to work as I would expect:

^Hostname^IP^
|foo1|192.168.1.251|
|foo2|192.168.1.250|
|foo3|192.168.1.249|
|foo4|192.168.1.248|
|foo5|192.168.1.247|
|foo6|192.168.1.246|
|foo7|192.168.1.245|
|foo8|192.168.1.244|
|foo9|192.168.1.243|
|foo10|192.168.1.242|
|foo11|192.168.1.241|
|foo12|192.168.1.240|

I can't figure out what the sorting method is used if you sort by the “IP” column — JonV 2009/03/11 10:23 (fixed sig)

I use the csv plugin to create basic tables on some pages, but wrapping them with sortable tags doesn't work. No errors appear, but no sortability either. Some kind of plugin interaction maybe? Using basic DokuWiki table tags does work, so the plugin is correctly installed. Anyone have experience in making these two play together nicely? — RobV 2009/05/30 22:24

For me “csv” and “sortable” work fine together - it needs some time before the effect is shown. “Sortable” works with “csv” hold in “Media-Collection” as well as in page-stored csv. But I considered a different behavior of searchengine: If I store my csv-file in mediacenter, the content isn't searchable! If I store the csv in the page, the search engine finds the content!
utaf 2009/06/11

It also worked for me with the “csv” plugin. Gimili17 2009/11/19. What a great plugin!

Even though its supposed to work for all tables – “just add <sortable> before and </sortable> after…”, if there are headings in between the tables, these don’t show up in the TOC (or at least it seems that only the first heading shows up).

<sortable>
heading
table 1
heading
table 2
</sortable>

– UA 2009-07-10

For me the sorting with dates that have a point as delimiter didn't work. The problem is that these dates are recognized by the guessType-function as numeric. A quick and dirty fix would be to first check if it's a date and only afterwards check for numeric:

  guessType: function(table, column) {
    // guess the type of a column based on its first non-blank row
    sortfn = sorttable.sort_alpha;
    for (var i=0; i<table.tBodies[0].rows.length; i++) {
      text = sorttable.getInnerText(table.tBodies[0].rows[i].cells[column]);
      if (text !== '') {
        // check for a date: dd/mm/yyyy or dd/mm/yy 
        // can have / or . or - as separator
        // can be mm/dd as well
        possdate = text.match(sorttable.DATE_RE);  // first check for date
        if (possdate) {
          // looks like a date
          first = parseInt(possdate[1]);
          second = parseInt(possdate[2]);
          if (first > 12) {
            // definitely dd/mm
            return sorttable.sort_ddmm;
          } else if (second > 12) {
            return sorttable.sort_mmdd;
          } else {
            // looks like a date, but we can't tell which, so assume
            // that it's dd/mm (English imperialism!) and keep looking
            sortfn = sorttable.sort_ddmm;
          }
        } else if (text.match(/^-?[£$¤]?[\d,.]+%?$/)) {  // now for numeric
          return sorttable.sort_numeric;
        }
      }
    }
    return sortfn;
  },

– garee 2009-09-18

• I have a question: is there any way to sort a table with “ignore case” option? for example:

– Damian 2009-10-07

Not with the current version. Sorry — oiv 2009/11/05 07:22

For some reason the plugin isn't working for me at all. You can see what I mean here. The syntax <sortable> is clearly recognized, since it's not output as text, but the table isn't sorted, nor sortable. This is dokuwiki version 2009-02-14b, with the additional indexmenu, wrap, and swiftmail plugins. Any suggestions? — Michael Repucci 2009-11-04

Seems to work perfectly — oiv 2009/11/05 07:22

Thank you for checking! Perhaps this is a fault in my expectations. I cleared my local cache, and touch'ed conf/local.php, and sortable doesn't seem to respect the initial sort parameter (e.g., <sortable r1>). Did I misunderstand how to use this parameter? Also, I'd expected that the arrow would show up upon refresh (or the first visit to a page) to indicate this initial sorting, and to cue the user that the column headers may be clicked on to sort the table, but it isn't there. It took me a while to realize, without the arrow, that I could click on the headers to sort them. But you're right, it does actually work. — Michael Repucci 2009/11/05 14:05

I see a problem when clicking on a non-existing link in the table, then creating the page: the (now existing) link is not displayed as such… probably a problem of meta-data not being built.

Removing the “sortable” tag and updating the page fixes it… but I don't want to do it each time I create a page. You may want to try by changing the name of the links below to some non existing page in the playground… — berteh 2009/11/27

<sortable>
^ T1 ^ T2 ^
| [[playground:non existing page1]] | [[playground:non existing page 2]] |
</sortable>

I believe I may have found a bug in the way sortablejs changes how footnotes work. Normally, the notes within a sortable table are collected and shown at the bottom of the sortable table, and all other notes are shown at the bottom of the page. While the notes are appearing correctly at both places, the pop-up text and links in-document repeat the info from the sortable table footnotes.

This is sort of hard to explain, so I'll just show some sample code and you can take a look.

<sortable>
^  Sortable Table  ^
|  contents((footer for the sortable table))  |
</sortable>

Normal Text((footer for the normal text))

For me, both hovers will show the “footer for the sortable table” text, because they both have the #fnt__1 id I think. Can anyone confirm this? — kououken 2010/01/21 07:41