====== sortablejs plugin ====== ---- plugin ---- description: JavaScript for sortable tables. author : Otto Vainio email : plugins@valjakko.net type : syntax lastupdate : 2011-05-10 compatible : 2009-12-25, anteater, angua depends : conflicts : similar : tags : javascript, tables, sort, listing downloadurl: http://koti.mbnet.fi/oiv/pubtest/sortablejs.zip ---- ^ Version | 2.5 (2011-05-10) | ^ Download | [[http://koti.mbnet.fi/oiv/pubtest/sortablejs.zip|sortablejs.zip]] | ===== Description ===== This plugin adds a JavaScript, which can be used to create sortable tables in other plugins. It is optional for [[linkmanager]] plugin. ===== Usage ===== 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 '''' and '''' tags around your table. ^Col1^Col3^Col3^ |1|one|25/12/2008| |2|two|10/12/2008| Table initially sorted by column 1 ^Col1^Col3^Col3^ |1|one|25/12/2008| |2|two|10/12/2008| Table initially reverse sorted by column 1 ^Col1^Col3^Col3^ |1|one|25/12/2008| |2|two|10/12/2008| 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. ===== Options ===== ││ │ │ │ ││ │ │ └No sort option for column 3 ││ │ └Sort column 2 as text always ││ └Sort column 1 as numeric always │└Initially sort by column 1 on page load └Reverse initial sort ===== Known bugs ===== * 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@valjakko.net|Otto Vainio]] 2009/01/14 10:16// * With merged rows it acts erratically so you can't really have a caption or title row for the table. * There is a formatting problem when exporting code blocks with the [[plugin:odt|ODT plugin]] that contain sortable tags. For example, this ^Last Name ^First Name ^Height in inches ^ |Smith |Joe |100 | |Doe |Jane |80 | |Thompson |Hunter |110 | |Dylan |Robert |105 | |Takemitsu |Toru |130 | |Barrueco |Manuel |95 | will not be exported with proper code block formatting in an ODT document. It is unclear whether this is an bug the the ODT plugin or with the sortablejs plugin. ===== Fixes ===== * Version 1.1 fixes a JavaScript error with IE. Thanks Ulrich --- //[[otto@valjakko.net|Otto Vainio]] 2008/03/12 04:47// * Version 2.0 adds possibility to use this script in all tables. Just add '''' before and '''' 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 '''' tag. Reverse sort by setting an ''r'' before the column number. '''' and '''' * Version 2.2a Fixed some jslint error which caused CSS+JavaScript compress to break. * Version 2.3 adds support for [[:plugin:odt|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. * Version 2.3a Fixed default sort with aligned text * version 2.4 Added options to set manual override options for column sort. (nosort, numeric, alpha, ddmm, mmdd) * version 2.4a css+js compress broke (again) this script. Now fixed some jslint complains. * version 2.5 Fixed problems with secionediting, footnotes and edittable ===== Discussion ===== * When the 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')'' --- //[[splitbrain@sampiemon.xs4all.nl|Hans Sampiemon]] 2008/11/27 12:26// * Thanks for the report. This is now fixed in the new (2.1) version. --- //[[otto@valjakko.net|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 [[plugin: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. --- //[[splitbrain@sampiemon.xs4all.nl|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 |dd/mm/yyyy|dd.mm.yyyy|dd-mm-yyyy| |mm/dd/yyyy|mm.dd.yyyy|mm-dd-yyyy| |dd/mm/yy|dd.mm.yy|dd-mm-yy| |mm/dd/yy|mm.dd.yy|mm-dd-yy| 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@valjakko.net|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']''. --- //[[splitbrain@sampiemon.xs4all.nl|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@valjakko.net|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@valjakko.net|Otto Vainio]] 2008/12/01 17:25// * If a cell is empty, the column that contains that cell will not allow sorting. --- //[[josef.var@gmail.com|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@valjakko.net|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 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 ---- * It would be great if the plug-in could sort links using their description and not their ''href''. I tried something like ''.replace(/(.*?)<\/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) > Almost 2 years later and this problem still exists. Anyone have any insight before I plug away at fixing this myself? -Mike >> What is the problem? I tried and the table above sorts correctly. And the question being "what the sorting method is used". Did you notice that you can now force a sorting method (alpha|numeric|ddmm|mmdd|nosort). If you have a patch for sorting IP address I would be glad if you can send it. I can add it to the plugin. --- [[user>oiv]] //2011/02/07 08:37// >>> Ah, yes, it works now. I hadn't updated the plugin in a while, but works as expected. Thank you, oiv! --- [[user>erple2|JonV]] //2011/10/14 18:38// >>>>Sorting IP Addresses is still not working for me. I've been trying to create a new function but have been unsuccessful. Is there a patch for sorting IPs? --Josh //2012/01/25 20:55// >>>>>I seem to have fixed the sorting for IP Addresses. Big thanks to Old Pedant at codingforums dot com for the help on the last part. ---Josh //2012/01/25 21:40// ==== Sorting by IP Address ==== **Altered this section to check if text was an IP address before checking 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 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(/^([01]?\d\d?|2[0-4]\d|25[0-5])\.([01]?\d\d?|2[0-4]\d|25[0-5])\.([01]?\d\d?|2[0-4]\d|25[0-5])\.([01]?\d\d?|2[0-4]\d|25[0-5])$/)) { // now for ip-addresses return sorttable.sort_ipaddr; } else if (text.match(/^-?[£$¤]?[\d,.]+%?$/)) { // now for numeric return sorttable.sort_numeric; } } } return sortfn; }, **Added this section at line 471. This created the sort_ipaddr function which turns the string into an array by splitting at the '.' then it compares each octet.** Thank You Old Pedant @ codingforums for the help with this last part. sort_ipaddr: function(a,b){ aa = a[0].split(".",4); bb = b[0].split(".",4); var resulta = aa[0]*0x1000000 + aa[1]*0x10000 + aa[2]*0x100 + aa[3]*1; var resultb = bb[0]*0x1000000 + bb[1]*0x10000 + bb[2]*0x100 + bb[3]*1; return resulta-resultb; }, ---- I use the [[plugin: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 before and 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). > %%%% > heading > table 1 > heading > table 2 > %%%% -- 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 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: | Auto | | casa | | Dato | | fin | -- Damian 2009-10-07 > Not with the current version. Sorry --- //[[otto@valjakko.net|oiv]] 2009/11/05 07:22// ---- For some reason the plugin isn't working for me at all. You can see what I mean [[http://neuroanalysis.org/wiki/doku.php/installation:platforms|here]]. The syntax 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 [[plugin:indexmenu]], [[plugin:wrap]], and [[plugin:swiftmail]] plugins. Any suggestions? --- Michael Repucci 2009-11-04 > Seems to work perfectly --- //[[otto@valjakko.net|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., ). 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.org|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@hotmail.com|berteh]] 2009/11/27// ^ T1 ^ T2 ^ | [[playground:non existing page1]] | [[playground:non existing page 2]] | ---- 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 Table ^ | contents((footer for the sortable table)) | 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// ----- It's not possible to sort tables with joined cells. Try the following code to see what i mean: ^ XXX ^ YYY ^ | AAA | 111 | | ::: | 222 | | CCC | 333 | --- //winky 2010/09/07 12:47// ----- There is a problem with default order at first visit if you use a table with align. For example ^ center ^left algin ^ | AAA | 111 | | BBB | 222 | | CCC | 333 | The reason is a change of class. Script search just for "row[0]" but with table align the class is "col0 centeralign" or something else. To fix this problem just a small change is wanted: defaultSort: function(table, colid, revs) { theadrow = table.tHead.rows[0].cells; colid--; colname ="col"+colid; // remove sorttable_sorted classes var thiscell=false; forEach(theadrow, function(cell) { if (cell.className==colname) // <-------------------------- this line is the problem { thiscell=cell; } Better use this: defaultSort: function(table, colid, revs) { theadrow = table.tHead.rows[0].cells; colid--; colname ="col"+colid; // remove sorttable_sorted classes var thiscell=false; forEach(theadrow, function(cell) { colclass=cell.className; classname = colclass.split(" "); if (classname[0]==colname) { thiscell=cell; } After change this you can use a table with alignment at head and default sortable function. --- //knutistgut 2010/09/22 // > Thanks. Applied you patch. v 2.3a --- [[user>oiv]] //2010/11/19 14:37// >> Thanks for including my created&sent patch that fast --- [[user>rauschen]] //2010/11/21 18:16// ==== IE8 problem with multiple tables==== I’m using your excellent sortablejs plugin and I’ve run into a problem with multiple tables on one page in ie8/windows7. Not sure if it is only related to ie8, but your script works on my w7 machine in chrome/firefox and on linux in chrome/firefox. The error message I get is this: Object doesn't support this property or method Line 1 character64845 The code it refers to is compressed so it’s hard to get at the line numbers properly, but M$ developer tools puts the cursor at this spot: if(colid.search(/\bsort/)!=-1){ colid=colid.replace('sortable',''); colid=colid.replace(' sort',''); #Error spot is at end of this line according to MS dev tools colid=colid.trim(); revs=false; Wrapping the colid.trim() call in an if statement seems to help: if(colid != '') { colid=colid.trim(); } --- [[aages@imr.no|Åge Strand]] //2011/01/26 14:19// > Applied you patch to the latest release (2.5). I don't have IE8 or Windows 7 so cannot test. Hope it works. ==== Firefox 7 Problem ==== For me with Firefox7 (Beta) the plugin dont work: http://1wiki.de/doku.php/medien:musik In the Error Log of Firefox i only found this: Fehler: event is undefined Quelldatei: http://1wiki.de/lib/exe/js.php?tseed=1316953764 Zeile: 213 With IE there is no problem.