plugin:sortablejs
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
plugin:sortablejs [2016-05-26 21:18] – vaxquis | plugin:sortablejs [2018-05-06 19:37] – Klap-in | ||
---|---|---|---|
Line 3: | Line 3: | ||
---- plugin ---- | ---- plugin ---- | ||
description: | description: | ||
- | author | + | author |
email : spamove@gmail.com | email : spamove@gmail.com | ||
type : syntax | type : syntax | ||
- | compatible : anteater, angua, Rincewind, | + | lastupdate : 2016-05-26 |
+ | compatible : Anteater, Angua, Rincewind, | ||
depends | depends | ||
conflicts | conflicts | ||
similar | similar | ||
tags : javascript, tables, sort, listing | tags : javascript, tables, sort, listing | ||
- | downloadurl: | + | downloadurl: |
- | sourcerepo : https:// | + | sourcerepo : https:// |
- | bugtracker : https:// | + | bugtracker : https:// |
+ | ---- | ||
===== Description ===== | ===== Description ===== | ||
- | This plugin adds a JavaScript, which can be used to create sortable tables | + | A JavaScript-based (client-side) plugin, which can be used to create sortable tables. It is optional for [[linkmanager]] plugin. |
+ | |||
+ | For server-side sorting or more robust sort facilities use Sam Wilson' | ||
+ | |||
+ | Previously maintained by oiv (Otto Vainio at otto@valjakko.net) | ||
===== Usage ===== | ===== Usage ===== | ||
Line 56: | Line 62: | ||
< | < | ||
- | < | + | < |
< | < | ||
Line 69: | Line 75: | ||
</ | </ | ||
- | ===== Older versions ===== | + | ===== Misc links ===== |
- | historical: https:// | + | |
- | GitHub revision history: https:// | + | |
- | + | ||
- | ===== 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. | + | |
- | * 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: | + | |
- | ^Last Name ^First Name ^Height in inches | + | |
- | |Smith | + | |
- | |Doe |Jane |80 | | + | |
- | |Thompson | + | |
- | |Dylan | + | |
- | |Takemitsu | + | |
- | |Barrueco | + | |
- | </ | + | |
- | + | ||
- | * Initially sorting by column 10 (or greater) doesn' | + | |
- | ^1 ^2 ^3 ^4 ^5 ^6 ^7 ^8 ^9 ^10 ^11 ^12 ^ | + | |
- | |1 |1 |1 |1 |1 |1 |1 |1 |1 |3 |3 |3 | | + | |
- | |1 |1 |1 |1 |1 |1 |1 |1 |1 |1 |1 |1 | | + | |
- | |1 |1 |1 |1 |1 |1 |1 |1 |1 |2 |2 |2 | | + | |
- | </ | + | |
- | + | ||
- | == Changelog == | + | |
- | + | ||
- | [[https:// | + | |
- | [[https:// | + | |
- | ===== Discussion ===== | + | |
- | + | ||
- | * < | + | |
- | * < | + | |
- | * Thanks for the report. This is now fixed in the new (2.1) version. | + | |
- | * < | + | |
- | * < | + | |
- | * < | + | |
- | ---- | + | |
- | + | ||
- | * The [[plugin: | + | |
- | 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/ | + | |
- | |dd/ | + | |
- | |mm/ | + | |
- | + | ||
- | 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 | + | |
- | --- // | + | |
- | > Although I understand why you would like the ultimate flexibility, | + | |
- | + | ||
- | >> This script is originally built by Stuart Langridge, [[http:// | + | |
- | >>> | + | |
- | + | ||
- | * If a cell is empty, the column that contains that cell will not allow sorting. --- // | + | |
- | * I had a complete line with empty cells. Sorting works only with row1, even if I used < | + | |
- | + | ||
- | + | ||
- | + | ||
- | ---- | + | |
- | + | ||
- | I test the sortable.js, | + | |
- | + | ||
- | Mixing of Types don't work. | + | |
- | + | ||
- | < | + | |
- | ^Test1 | + | |
- | |BB | | + | |
- | | | | + | |
- | |10 | | + | |
- | | | | + | |
- | |AA | | + | |
- | | | | + | |
- | |DD | | + | |
- | </ | + | |
- | + | ||
- | + | ||
- | After this, no table can by sorted anymore. | + | |
- | + | ||
- | < | + | |
- | ^Test2 | + | |
- | |BB |BB | | + | |
- | |AA || | + | |
- | </ | + | |
- | + | ||
- | + | ||
- | (If possible, could by useful to sort, sort-down > sort-up > no-sort ...) | + | |
- | + | ||
- | > This can be found in version 2.9 | + | |
- | + | ||
- | + | ||
- | >> I've done some tests and this is what I found out: If you have numbers and words in the column you want to sort, you should set the type of the column to ' | + | |
- | + | ||
- | + | ||
- | **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, | + | |
- | < | + | |
- | guessType: function(table, | + | |
- | // guess the type of a column based on its first non-blank row | + | |
- | sortfn = sorttable.sort_alpha; | + | |
- | for (var i=0; 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< | + | |
- | text = sorttable.getInnerText(table.tBodies[0].rows[i].cells[column]); | + | |
- | if (text !== '' | + | |
- | if (text.match(/ | + | |
- | 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 '' | + | |
- | + | ||
- | ---- | + | |
- | The following table doesn' | + | |
- | < | + | |
- | ^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 " | + | |
- | > 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. | + | |
- | >>> | + | |
- | >>>> | + | |
- | >>>>> | + | |
- | ==== Sorting by IP Address ==== | + | |
- | **Altered this section to check if text was an IP address before checking for numeric ** | + | |
- | <code javascript> | + | |
- | guessType: function(table, | + | |
- | // guess the type of a column based on its first non-blank row | + | |
- | sortfn = sorttable.sort_alpha; | + | |
- | for (var i=0; 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; | + | |
- | } | + | |
- | } else if (text.match(/ | + | |
- | return sorttable.sort_ipaddr; | + | |
- | } else if (text.match(/ | + | |
- | 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 ' | + | |
- | <code javascript> | + | |
- | sort_ipaddr: | + | |
- | aa = a[0].split(" | + | |
- | bb = b[0].split(" | + | |
- | + | ||
- | 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: | + | |
- | + | ||
- | >For me " | + | |
- | + | ||
- | >It also worked for me with the " | + | |
- | + | ||
- | ---- | + | |
- | + | ||
- | Even though its supposed to work for all tables – “just add < | + | |
- | + | ||
- | > %%< | + | |
- | > 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: | + | |
- | <code javascript> | + | |
- | guessType: function(table, | + | |
- | // guess the type of a column based on its first non-blank row | + | |
- | sortfn = sorttable.sort_alpha; | + | |
- | for (var i=0; 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; | + | |
- | } | + | |
- | } else if (text.match(/ | + | |
- | return sorttable.sort_numeric; | + | |
- | } | + | |
- | } | + | |
- | } | + | |
- | return sortfn; | + | |
- | }, | + | |
- | </ | + | |
- | + | ||
- | -- garee 2009-09-18 | + | |
- | ---- | + | |
- | + | ||
- | ==== Ignore case option ==== | + | |
- | * I have a question: is there any way to sort a table with **" | + | |
- | + | ||
- | | Auto | | + | |
- | | casa | | + | |
- | | Dato | | + | |
- | | fin | | + | |
- | -- Damian 2009-10-07 | + | |
- | + | ||
- | > Not with the current version. Sorry --- // | + | |
- | + | ||
- | >> After almost three years I found the answer of my question above, two lines of the script must be changed, see: | + | |
- | >> http:// | + | |
- | >> --- [[user> | + | |
- | + | ||
- | >>> | + | |
- | + | ||
- | ---- | + | |
- | For some reason the plugin isn't working for me at all. You can see what I mean [[http:// | + | |
- | + | ||
- | > Seems to work perfectly | + | |
- | + | ||
- | >> Thank you for checking! Perhaps this is a fault in my expectations. I cleared my local cache, and touch' | + | |
- | + | ||
- | ---- | + | |
- | 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 " | + | |
- | < | + | |
- | < | + | |
- | ^ T1 ^ T2 ^ | + | |
- | | [[playground: | + | |
- | </ | + | |
- | </ | + | |
- | + | ||
- | ---- | + | |
- | + | ||
- | 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 " | + | |
- | + | ||
- | > //notes within a sortable table are collected and shown at the bottom of the sortable table// looks similar to a phenomenon that seems to be rather a **BUG**: if there is a blank line between the table and the closing ''</ | + | |
- | + | ||
- | ----- | + | |
- | + | ||
- | 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 | + | |
- | | AAA | 111 | | + | |
- | | BBB | 222 | | + | |
- | | CCC | 333 | | + | |
- | </ | + | |
- | </ | + | |
- | + | ||
- | The reason is a change of class. Script search just for " | + | |
- | + | ||
- | To fix this problem just a small change is wanted: | + | |
- | + | ||
- | < | + | |
- | defaultSort: | + | |
- | theadrow = table.tHead.rows[0].cells; | + | |
- | colid--; | + | |
- | colname =" | + | |
- | // remove sorttable_sorted classes | + | |
- | var thiscell=false; | + | |
- | | + | |
- | if (cell.className==colname) // < | + | |
- | { | + | |
- | | + | |
- | } | + | |
- | </ | + | |
- | + | ||
- | Better use this: | + | |
- | + | ||
- | < | + | |
- | defaultSort: | + | |
- | theadrow = table.tHead.rows[0].cells; | + | |
- | colid--; | + | |
- | colname =" | + | |
- | // remove sorttable_sorted classes | + | |
- | var thiscell=false; | + | |
- | | + | |
- | | + | |
- | | + | |
- | if (classname[0]==colname) | + | |
- | { | + | |
- | | + | |
- | } | + | |
- | </ | + | |
- | + | ||
- | After change this you can use a table with alignment at head and default sortable function. | + | |
- | + | ||
- | --- // | + | |
- | + | ||
- | > Thanks. Applied you patch. v 2.3a --- [[user> | + | |
- | >> Thanks for including my created& | + | |
- | + | ||
- | + | ||
- | ==== 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/ | + | |
- | + | ||
- | The error message I get is this: | + | |
- | + | ||
- | Object doesn' | + | |
- | 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(/ | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | </ | + | |
- | + | ||
- | Wrapping the colid.trim() call in an if statement seems to help: | + | |
- | < | + | |
- | if(colid != '' | + | |
- | | + | |
- | } | + | |
- | </ | + | |
- | --- [[aages@imr.no|Åge Strand]] // | + | |
- | + | ||
- | > 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:// | + | |
- | + | ||
- | In the Error Log of Firefox i only found this: | + | |
- | Fehler: event is undefined | + | |
- | Quelldatei: http:// | + | |
- | Zeile: 213 | + | |
- | + | ||
- | With IE there is no problem. | + | |
- | + | ||
- | ==== Update ==== | + | |
- | + | ||
- | I delete some of you " | + | |
- | + | ||
- | <file javascript sortablejs.js> | + | |
- | /* | + | |
- | SortTable | + | |
- | + | ||
- | version 2.1 | + | |
- | 2007.04.07 | + | |
- | Stuart Langridge, http:// | + | |
- | + | ||
- | 2008.02.19 | + | |
- | Fixed some jslint errors to support DokuWiki (http:// | + | |
- | + | ||
- | function reinitsort() | + | |
- | sorttable.reinit | + | |
- | added by Otto Vainio to allow sort tables updated with javascript. | + | |
- | Otto Vainio (otto@valjakko.net) | + | |
- | + | ||
- | 2008.11.27 | + | |
- | Changed line 77 document.getElementsByTagName(' | + | |
- | To allow multiple sortable tables in same page | + | |
- | (Thanks to Hans Sampiemon) | + | |
- | + | ||
- | 2009.01.14 | + | |
- | Added option for default sorting. | + | |
- | Use dokuwiki event registration. | + | |
- | + | ||
- | 2009.01.27 | + | |
- | Cleaned some jlint errors to make this workable, when css+js compress is set in dokuwiki | + | |
- | + | ||
- | 2011.05.10 | + | |
- | * version 2.5 Fixed problems with secionediting, | + | |
- | + | ||
- | 2012.05.04 | + | |
- | * version 3.0 | + | |
- | | + | |
- | IP sorting | + | |
- | sort method improvement | + | |
- | some corrections | + | |
- | + | ||
- | Instructions: | + | |
- | Used from dokuwiki | + | |
- | Click on the headers to sort | + | |
- | + | ||
- | Thanks to many, many people for contributions and suggestions. | + | |
- | Licenced as X11: http:// | + | |
- | This basically means: do what you want with it. | + | |
- | */ | + | |
- | + | ||
- | //var stIsIE = / | + | |
- | var sortchr_down = '& | + | |
- | var sortchr_up = '& | + | |
- | var sortchr_no = '& | + | |
- | + | ||
- | var tableid = 0; | + | |
- | + | ||
- | sorttable = { | + | |
- | reinit: function() { | + | |
- | sorttable.initial(); | + | |
- | }, | + | |
- | init: function() { | + | |
- | sorttable.initial(); | + | |
- | }, | + | |
- | + | ||
- | initial: function() { | + | |
- | + | ||
- | // quit if this function has already been called | + | |
- | if (arguments.callee.done) {return;} | + | |
- | // flag this function so we don't do the same thing twice | + | |
- | arguments.callee.done = true; | + | |
- | // kill the timer | + | |
- | if (_timer) {clearInterval(_timer); | + | |
- | + | ||
- | if (!document.createElement || !document.getElementsByTagName) {return;} | + | |
- | + | ||
- | // 1900-2039 | + | |
- | sorttable.DATE_YYMMDD = / | + | |
- | sorttable.DATE_DDMMYY = / | + | |
- | sorttable.DATE_MMDDYY = / | + | |
- | // | + | |
- | + | ||
- | forEach(document.getElementsByTagName(' | + | |
- | if (table.className.search(/ | + | |
- | sorttable.makeSortable(table); | + | |
- | } | + | |
- | }); | + | |
- | forEach(document.getElementsByTagName(' | + | |
- | if (div.className.search(/ | + | |
- | sorttable.makeSortablediv(div); | + | |
- | } | + | |
- | }); | + | |
- | }, | + | |
- | + | ||
- | makeSortablediv: | + | |
- | if (div.getElementsByTagName(' | + | |
- | } else { | + | |
- | forEach(div.getElementsByTagName(' | + | |
- | sorttable.makeSortable(table); | + | |
- | if (colid.search(/ | + | |
- | colid = colid.replace(' | + | |
- | colid = colid.replace(' | + | |
- | if (!colid != '' | + | |
- | colid = colid.trim(); | + | |
- | } | + | |
- | revs=false; | + | |
- | if (colid.search(/ | + | |
- | revs=true; | + | |
- | colid = colid.replace(' | + | |
- | } | + | |
- | sorttable.defaultSort(table, | + | |
- | } | + | |
- | }); | + | |
- | + | ||
- | } | + | |
- | }, | + | |
- | + | ||
- | defaultSort: | + | |
- | // theadrow = table.tHead.rows[0].cells; | + | |
- | theadrow = table.rows[0].cells; | + | |
- | colid--; | + | |
- | colname =" | + | |
- | // remove sorttable_sorted classes | + | |
- | var thiscell=false; | + | |
- | | + | |
- | | + | |
- | | + | |
- | // if (cell.className==colname) { | + | |
- | if (classname[0]==colname) { | + | |
- | | + | |
- | } | + | |
- | }); | + | |
- | if (thiscell===false) {return;} | + | |
- | + | ||
- | | + | |
- | if (revs) sorttable.sortit(thiscell, | + | |
- | }, | + | |
- | + | ||
- | makeSortable: | + | |
- | // tableid++; | + | |
- | /* | + | |
- | if (table.getElementsByTagName(' | + | |
- | // table doesn' | + | |
- | // put the first table row in it. | + | |
- | the = document.createElement(' | + | |
- | the.appendChild(table.rows[0]); | + | |
- | table.insertBefore(the, | + | |
- | } | + | |
- | + | ||
- | // Safari doesn' | + | |
- | + | ||
- | if (table.tHead === null) {table.tHead = table.getElementsByTagName(' | + | |
- | + | ||
- | if (table.tHead.rows.length != 1) {return;} // can't cope with two header rows | + | |
- | + | ||
- | // table.tHead.className += ' tableid' | + | |
- | + | ||
- | // Sorttable v1 put rows with a class of " | + | |
- | // " | + | |
- | // to do is put them in a tfoot. So, if there are sortbottom rows, | + | |
- | // for backwards compatibility, | + | |
- | sortbottomrows = []; | + | |
- | for (var i=0; i< | + | |
- | if (table.rows[i].className.search(/ | + | |
- | sortbottomrows[sortbottomrows.length] = table.rows[i]; | + | |
- | } | + | |
- | } | + | |
- | if (sortbottomrows) { | + | |
- | if (table.tFoot === null) { | + | |
- | // table doesn' | + | |
- | tfo = document.createElement(' | + | |
- | table.appendChild(tfo); | + | |
- | } | + | |
- | for (var ii=0; ii< | + | |
- | tfo.appendChild(sortbottomrows[ii]); | + | |
- | } | + | |
- | delete sortbottomrows; | + | |
- | } | + | |
- | */ | + | |
- | + | ||
- | // | + | |
- | colid=table.className; | + | |
- | + | ||
- | overrides = new Array(); | + | |
- | var patt1=/ | + | |
- | var overrides = new Array(); | + | |
- | + | ||
- | if (colid.search(patt1) != -1) { | + | |
- | var overrides = new Array(); | + | |
- | overrides = colid.match(patt1); | + | |
- | var xo=""; | + | |
- | for (xo in overrides) { | + | |
- | if (xo == "" | + | |
- | } else { | + | |
- | try { | + | |
- | var tmp = overrides[xo].split(" | + | |
- | var ind = tmp[1]; | + | |
- | var val = tmp[2]; | + | |
- | overrides[ind]=val; | + | |
- | } catch (e) { | + | |
- | } | + | |
- | } | + | |
- | } | + | |
- | colid = colid.replace(patt1,'' | + | |
- | } | + | |
- | + | ||
- | + | ||
- | // work through each column and calculate its type | + | |
- | // headrow = table.tHead.rows[0].cells; | + | |
- | headrow = table.rows[0].cells; | + | |
- | // for (var i=0; i< | + | |
- | for (i=0; i< | + | |
- | // manually override the type with a sorttable_type attribute | + | |
- | var colOptions=""; | + | |
- | if (overrides[i+1]) { | + | |
- | colOptions=overrides[i+1]; | + | |
- | } | + | |
- | if (!colOptions.match(/ | + | |
- | mtch = colOptions.match(/ | + | |
- | if (mtch) { override = mtch[0]; } | + | |
- | if (mtch && typeof sorttable[" | + | |
- | headrow[i].sorttable_sortfunction = sorttable[" | + | |
- | } else { | + | |
- | headrow[i].sorttable_sortfunction = sorttable.guessType(table, | + | |
- | } | + | |
- | + | ||
- | // make it clickable to sort | + | |
- | headrow[i].sorttable_columnindex = i; | + | |
- | headrow[i].sorttable_tbody = table.tBodies[0]; | + | |
- | // dean_addEvent(headrow[i]," | + | |
- | addEvent(headrow[i]," | + | |
- | var sorttyp; | + | |
- | if (this.className.search(/ | + | |
- | sorttyp = 2; | + | |
- | } else if (this.className.search(/ | + | |
- | sorttyp = 3; | + | |
- | } else if (this.className.search(/ | + | |
- | sorttyp = 1; | + | |
- | } else { | + | |
- | sorttyp = 0; | + | |
- | } | + | |
- | sorttable.sortit(this, | + | |
- | }); // function(e) | + | |
- | + | ||
- | } | + | |
- | } | + | |
- | }, | + | |
- | + | ||
- | + | ||
- | //sortit: function(sortthis, | + | |
- | sortit: function(element, | + | |
- | + | ||
- | element.className = element.className.replace(/ | + | |
- | + | ||
- | switch (sorttyp) { | + | |
- | case 1: | + | |
- | element.className += ' sorttable_sorted_down'; | + | |
- | element.getElementsByTagName(" | + | |
- | + | ||
- | break; case 2: | + | |
- | element.className += ' sorttable_sorted_up'; | + | |
- | element.getElementsByTagName(" | + | |
- | + | ||
- | break; case 3: | + | |
- | element.className += ' sorttable_sorted_no'; | + | |
- | element.getElementsByTagName(" | + | |
- | + | ||
- | // Never Sorted, prepare content | + | |
- | break; default: | + | |
- | sorttyp = 0; | + | |
- | theadrow = element.parentNode; | + | |
- | // | + | |
- | // remove sorttable_sorted classes | + | |
- | forEach(theadrow.childNodes, | + | |
- | if (cell.nodeType == 1) { // an element | + | |
- | cell.className = cell.className.replace(/ | + | |
- | // | + | |
- | sortfwdind = cell.getElementsByTagName(" | + | |
- | if (sortfwdind) sortfwdind.parentNode.removeChild(sortfwdind); | + | |
- | } | + | |
- | }); | + | |
- | + | ||
- | // Create span Char | + | |
- | sortfwdind = document.createElement(' | + | |
- | // | + | |
- | sortfwdind.innerHTML = sortchr_down; | + | |
- | element.appendChild(sortfwdind); | + | |
- | + | ||
- | // delete rowodd|roweven format-class, | + | |
- | table = theadrow.parentNode; | + | |
- | forEach(table.childNodes, | + | |
- | if (row.nodeType == 1) { // an element | + | |
- | row.className = row.className.replace(/ | + | |
- | } | + | |
- | }); | + | |
- | + | ||
- | element.className += ' sorttable_sorted_down'; | + | |
- | // | + | |
- | } | + | |
- | + | ||
- | + | ||
- | // Never sorted or sort_down, content to array | + | |
- | if (sorttyp == 0 || sorttyp == 1) { | + | |
- | /* build an array to sort. This is a Schwartzian transform thing, | + | |
- | i.e., we " | + | |
- | sort based on the sort keys, and then put the rows back in order | + | |
- | which is a lot faster because you only do getInnerText once per row | + | |
- | */ | + | |
- | row_array = []; | + | |
- | col = element.sorttable_columnindex; | + | |
- | rows = element.sorttable_tbody.rows; | + | |
- | for (var j=1; j< | + | |
- | if (col < rows[j].cells.length) { | + | |
- | row_array[row_array.length] = [sorttable.getInnerText(rows[j].cells[col]), | + | |
- | } else { | + | |
- | row_array[row_array.length] = ''; | + | |
- | } | + | |
- | } | + | |
- | + | ||
- | // If you want a stable sort, use sorttable.shaker_sort, | + | |
- | sorttable.shaker_sort(row_array, | + | |
- | // | + | |
- | } | + | |
- | + | ||
- | // inverse from Sorted down | + | |
- | if (sorttyp == 2) { | + | |
- | // if we're already sorted by this column, just reverse the table, which is quicker | + | |
- | sorttable.reverse(element.sorttable_tbody); | + | |
- | } | + | |
- | + | ||
- | // No-Sort, restore order by row number | + | |
- | if (sorttyp == 3) { | + | |
- | /* build an array to sort. This is a Schwartzian transform thing, | + | |
- | i.e., we " | + | |
- | sort based on the sort keys, and then put the rows back in order | + | |
- | which is a lot faster because you only do data once per row | + | |
- | */ | + | |
- | row_array = []; | + | |
- | rows = element.sorttable_tbody.rows; | + | |
- | for (var j=1; j< | + | |
- | row_array[row_array.length] = [rows[j].className.replace(/ | + | |
- | } | + | |
- | + | ||
- | // If you want a stable sort, use sorttable.shaker_sort, | + | |
- | // | + | |
- | row_array.sort(sorttable.sort_numeric); | + | |
- | } | + | |
- | + | ||
- | if (sorttyp != 2) { | + | |
- | tb = element.sorttable_tbody; | + | |
- | for (var j3=0; j3< | + | |
- | tb.appendChild(row_array[j3][1]); | + | |
- | } | + | |
- | + | ||
- | delete row_array; | + | |
- | } | + | |
- | + | ||
- | }, | + | |
- | + | ||
- | + | ||
- | guessType: function(table, | + | |
- | // guess the type of a column | + | |
- | sortfn = sorttable.sort_alpha; | + | |
- | + | ||
- | for (var i=1; i< | + | |
- | //if (i==0) {continue;} //BUGFIX for non equal col amount | + | |
- | if (column >= table.tBodies[0].rows[i].cells.length) {continue;} //BUGFIX for non equal col amount | + | |
- | text = sorttable.getInnerText(table.tBodies[0].rows[i].cells[column]); | + | |
- | text = text.replace(/ | + | |
- | + | ||
- | if (text !== '' | + | |
- | if (text.match(/ | + | |
- | return sorttable.sort_numericexp; | + | |
- | } else if (text.match(/ | + | |
- | return sorttable.sort_numeric; | + | |
- | } else if (text.match(/ | + | |
- | return sorttable.sort_ip; | + | |
- | } | + | |
- | /* 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_YYMMDD); | + | |
- | if (possdate) return sorttable.sort_date; | + | |
- | possdate = text.match(sorttable.DATE_DDMMYY); | + | |
- | if (possdate) return sorttable.sort_date; | + | |
- | possdate = text.match(sorttable.DATE_MMDDYY); | + | |
- | if (possdate) return sorttable.sort_date; | + | |
- | + | ||
- | /* | + | |
- | 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_date; | + | |
- | } 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_date; | + | |
- | } | + | |
- | } else { | + | |
- | return sorttable.sort_alpha; | + | |
- | } | + | |
- | */ | + | |
- | + | ||
- | } | + | |
- | } | + | |
- | + | ||
- | return sortfn; | + | |
- | }, | + | |
- | + | ||
- | + | ||
- | getInnerText: | + | |
- | + | ||
- | // is a normal data, not a node | + | |
- | if (typeof node == ' | + | |
- | if (typeof node == ' | + | |
- | if (typeof node == ' | + | |
- | + | ||
- | /* gets the text we want to use for sorting for a cell. | + | |
- | | + | |
- | this is *not* a generic getInnerText function; it's special to sorttable. | + | |
- | for example, you can override the cell text with a customkey attribute. | + | |
- | it also gets .value for < | + | |
- | */ | + | |
- | hasInputs = (typeof node.getElementsByTagName == ' | + | |
- | + | ||
- | if (node.getAttribute(" | + | |
- | return node.getAttribute(" | + | |
- | } else if (typeof node.textContent != ' | + | |
- | return node.textContent.replace(/ | + | |
- | } else if (typeof node.innerText != ' | + | |
- | return node.innerText.replace(/ | + | |
- | } else if (typeof node.text != ' | + | |
- | return node.text.replace(/ | + | |
- | } else { | + | |
- | switch (node.nodeType) { | + | |
- | case 3: // | + | |
- | if (node.nodeName.toLowerCase() == ' | + | |
- | return node.value.replace(/ | + | |
- | } | + | |
- | case 4: // | + | |
- | return node.nodeValue.replace(/ | + | |
- | break; | + | |
- | case 1: // | + | |
- | case 11: // | + | |
- | var innerText = ''; | + | |
- | for (var i = 0; i < node.childNodes.length; | + | |
- | innerText += sorttable.getInnerText(node.childNodes[i]); | + | |
- | } | + | |
- | return innerText.replace(/ | + | |
- | break; | + | |
- | default: | + | |
- | return ''; | + | |
- | } | + | |
- | } | + | |
- | }, | + | |
- | + | ||
- | + | ||
- | reverse: function(tbody) { | + | |
- | // reverse the rows in a tbody | + | |
- | newrows = []; | + | |
- | for (var i=0; i< | + | |
- | newrows[newrows.length] = tbody.rows[i]; | + | |
- | } | + | |
- | for (var i=newrows.length-1; | + | |
- | | + | |
- | } | + | |
- | delete newrows; | + | |
- | }, | + | |
- | + | ||
- | + | ||
- | /* sort functions | + | |
- | each sort function takes two parameters, a and b | + | |
- | you are comparing a[0] and b[0] | + | |
- | */ | + | |
- | sort_alpha: function(a, | + | |
- | if (typeof a[0] == ' | + | |
- | if (typeof a[0] == ' | + | |
- | if (typeof b[0] == ' | + | |
- | + | ||
- | if (a[0]=='' | + | |
- | if (a[0]=='' | + | |
- | if (b[0]=='' | + | |
- | + | ||
- | if (a[0]> | + | |
- | if (a[0]< | + | |
- | return 0; | + | |
- | }, | + | |
- | + | ||
- | + | ||
- | sort_numeric: | + | |
- | aa = parseFloat(a[0].replace(/ | + | |
- | bb = parseFloat(b[0].replace(/ | + | |
- | + | ||
- | if (isNaN(aa) && isNaN(bb)) { return sorttable.sort_alpha(a, | + | |
- | if (isNaN(aa)) { return 1; } | + | |
- | if (isNaN(bb)) { return -1; } | + | |
- | + | ||
- | return aa-bb; | + | |
- | }, | + | |
- | + | ||
- | + | ||
- | sort_numericexp: | + | |
- | aa = Number(a[0].replace(/ | + | |
- | bb = Number(b[0].replace(/ | + | |
- | + | ||
- | if (isNaN(aa) && isNaN(bb)) { return sorttable.sort_alpha(a, | + | |
- | if (isNaN(aa)) {return 1;} | + | |
- | if (isNaN(bb)) {return -1;} | + | |
- | + | ||
- | return aa-bb; | + | |
- | }, | + | |
- | + | ||
- | + | ||
- | sort_ip: function(a, | + | |
- | if (typeof a[0] == ' | + | |
- | if (typeof a[0] == ' | + | |
- | if (typeof b[0] == ' | + | |
- | + | ||
- | aa = a[0].replace(/ | + | |
- | aa = aa.replace(/ | + | |
- | bb = b[0].replace(/ | + | |
- | bb = bb.replace(/ | + | |
- | + | ||
- | if (aa>bb) {return 1;} | + | |
- | if (aa<bb) {return -1;} | + | |
- | return 0; | + | |
- | }, | + | |
- | + | ||
- | + | ||
- | sort_date: function(a, | + | |
- | if (typeof a[0] == ' | + | |
- | if (typeof a[0] == ' | + | |
- | if (typeof b[0] == ' | + | |
- | + | ||
- | dt1 = sorttable.date_format(a[0]); | + | |
- | dt2 = sorttable.date_format(b[0]); | + | |
- | + | ||
- | if (dt1> | + | |
- | if (dt1< | + | |
- | return 0; | + | |
- | }, | + | |
- | + | ||
- | + | ||
- | date_format: | + | |
- | mtch = frm.match(sorttable.DATE_YYMMDD); | + | |
- | if (mtch) { | + | |
- | y = mtch[1]; m = mtch[2]; d = mtch[3]; | + | |
- | + | ||
- | } else { | + | |
- | mtch = frm.match(sorttable.DATE_DDMMYY); | + | |
- | if (mtch) { | + | |
- | y = mtch[3]; m = mtch[2]; d = mtch[1]; | + | |
- | + | ||
- | } else { | + | |
- | mtch = frm.match(sorttable.DATE_MMDDYY); | + | |
- | if (mtch) { | + | |
- | y = mtch[3]; m = mtch[1]; d = mtch[2]; | + | |
- | + | ||
- | } else { | + | |
- | return frm; | + | |
- | } | + | |
- | } | + | |
- | } | + | |
- | + | ||
- | if (y.length < 4 ) {y = ' | + | |
- | if (m.length == 1) {m = ' | + | |
- | if (d.length == 1) {d = ' | + | |
- | + | ||
- | if (typeof mtch[4] != ' | + | |
- | + | ||
- | return y+m+d+t; | + | |
- | }, | + | |
- | + | ||
- | + | ||
- | shaker_sort: | + | |
- | /* A stable sort function to allow multi-level sorting of data | + | |
- | see: http:// | + | |
- | | + | |
- | */ | + | |
- | var b = 0; | + | |
- | var t = list.length - 1; | + | |
- | var swap = true; | + | |
- | + | ||
- | while(swap) { | + | |
- | swap = false; | + | |
- | for(var i = b; i < t; ++i) { | + | |
- | if ( comp_func(list[i], | + | |
- | var q = list[i]; list[i] = list[i+1]; list[i+1] = q; | + | |
- | swap = true; | + | |
- | } | + | |
- | } // for | + | |
- | t--; | + | |
- | + | ||
- | if (!swap) {break;} | + | |
- | + | ||
- | for(var i = t; i > b; --i) { | + | |
- | if ( comp_func(list[i], | + | |
- | var q = list[i]; list[i] = list[i-1]; list[i-1] = q; | + | |
- | swap = true; | + | |
- | } | + | |
- | } // for | + | |
- | b++; | + | |
- | + | ||
- | } // while(swap) | + | |
- | } | + | |
- | + | ||
- | + | ||
- | }; | + | |
- | + | ||
- | + | ||
- | /* ****************************************************************** | + | |
- | | + | |
- | | + | |
- | + | ||
- | // Dean Edwards/ | + | |
- | + | ||
- | + | ||
- | // Dean's forEach: http:// | + | |
- | /* | + | |
- | forEach, version 1.0 | + | |
- | Copyright 2006, Dean Edwards | + | |
- | License: http:// | + | |
- | */ | + | |
- | + | ||
- | // array-like enumeration | + | |
- | if (!Array.forEach) { // mozilla already supports this | + | |
- | Array.forEach = function(array, | + | |
- | for (var i = 0; i < array.length; | + | |
- | block.call(context, | + | |
- | } | + | |
- | }; | + | |
- | } | + | |
- | + | ||
- | // generic enumeration | + | |
- | Function.prototype.forEach = function(object, | + | |
- | for (var key in object) { | + | |
- | if (typeof this.prototype[key] == " | + | |
- | block.call(context, | + | |
- | } | + | |
- | } | + | |
- | }; | + | |
- | + | ||
- | // character enumeration | + | |
- | String.forEach = function(string, | + | |
- | Array.forEach(string.split("" | + | |
- | block.call(context, | + | |
- | }); | + | |
- | }; | + | |
- | + | ||
- | // globally resolve forEach enumeration | + | |
- | var forEach = function(object, | + | |
- | if (object) { | + | |
- | var resolve = Object; // default | + | |
- | if (object instanceof Function) { | + | |
- | // functions have a " | + | |
- | resolve = Function; | + | |
- | } else if (object.forEach instanceof Function) { | + | |
- | // the object implements a custom forEach method so use that | + | |
- | object.forEach(block, | + | |
- | return; | + | |
- | } else if (typeof object == " | + | |
- | // the object is a string | + | |
- | resolve = String; | + | |
- | } else if (typeof object.length == " | + | |
- | // the object is array-like | + | |
- | resolve = Array; | + | |
- | } | + | |
- | resolve.forEach(object, | + | |
- | } | + | |
- | }; | + | |
- | + | ||
- | + | ||
- | if (' | + | |
- | window.addEvent(window, | + | |
- | }; | + | |
- | + | ||
- | // | + | |
- | + | ||
- | function reinitsort() { | + | |
- | sorttable.reinit(); | + | |
- | }; | + | |
- | </ | + | |
- | + | ||
- | ==== Fork: a switch to Tablesorter ==== | + | |
- | + | ||
- | I have rejigged this to use Christian Bach's Tablesorter jQuery plugin instead of Stuart Langridge' | + | |
- | + | ||
- | > Great. I looked that option some time ago, but never got the time for it. It would be great if you can add the compatible options. | + | |
- | > Nothing to add other than Thank you! Your work is appreciated. I hope this isn't removed as I believe it won't hurt to acknowledge great work. - Dexter // | + | |
- | + | ||
- | >> Ok, I've had a go at adding options. | + | |
- | >> Still to do: Permit changing themes (perhaps '' | + | |
- | >> --- [[user> | + | |
- | >> Update: here's a tarball, including the submodule (because Github doesn' | + | |
- | >> --- [[user> | + | |
- | >> Works with Weatherwax. Thanks for the fork. Michael // | + | |
- | + | ||
- | === Date sort? === | + | |
- | + | ||
- | Hi Sam, thanks for this version which works under Release 2013-03-06 " | + | |
- | The original version is not working.\\ | + | |
- | Does it support sort of dates in format dd.mm.yyyy hh:mm ? I tried but seems not to work. < | + | |
- | ==== AlphaNumeric sort? ==== | + | |
- | + | ||
- | First, thanks for the plugin -- it works great so far ;) | + | |
- | + | ||
- | One problem I have: I need to sort a table which has entries like [' | + | |
- | + | ||
- | Thanks! :-) | + | |
- | + | ||
- | --- Andre // | + | |
- | + | ||
- | ====Weatherwax==== | + | |
- | + | ||
- | Don't works with 2013-05-10 " | + | |
- | + | ||
- | > The [[https:// | + | |
- | + | ||
- | >> New version 2.6 should work with WeatherWax now | + | |
- | + | ||
- | === Possible JavaScript issue? === | + | |
- | + | ||
- | + | ||
- | Unfortunatelly, | + | |
- | UPDATE: On the error console I get: \\ | + | |
- | '' | + | |
- | '' | + | |
- | please also see this forum thread: https:// | + | |
- | > Just tried a fresh install of Weatherwax + sortablejs 2.6 and works for me. The error you are getting is exactly the one I fixed for this to work in Weatherwax. Are you sure you have the latest sortablejs? If you look the script.js file it should have the following lines near the end. | + | |
- | if (' | + | |
- | window.addEvent(window, | + | |
- | } else { | + | |
- | jQuery(function() { | + | |
- | sorttable.init(); | + | |
- | }); | + | |
- | } | + | |
- | + | ||
- | >> Yes, I have the newest sortablejs - I've tried withe manual update as well as update from control panel. The end of '' | + | |
- | d17afd8e5222e610464ac1fe8051cd63 | + | |
- | 88ba7f72338ef8786e82ef91ae917b2f | + | |
- | >>> | + | |
- | >>>> | + | |
- | + | ||
- | === Exclude line from sorting === | + | |
- | + | ||
- | Is there a possiblity to avoid single lines from beeing sorted (i.e. a sum line a the end of the table)? --- Mark Buss // | + | |
- | > I would also love to see this --- Markus Napp // | + | |
- | >> in 2.9 --- [[user> | + | |
- | + | ||
- | >>> | + | |
- | + | ||
- | === Exclude multiple lines from sorting === | + | |
- | In some of my tables I have several rows (using tablecalc) like averages, sums and rounded values. Is it possible to specify the number of rows that are excluded? e.g. '' | + | |
- | --- Markus Napp // | + | |
- | > Done in 2.9 --- [[user> | + | |
- | + | ||
- | === Have a third " | + | |
- | Once you have sorted a table the only way to get it back to the original order (as coded in the wiki syntax) is to reload the page as far as I can tell. It would be preferrable to have the table revert to it's default state on the third click. \\ | + | |
- | --- Markus Napp // | + | |
- | > Please update to 2.9 --- [[user> | + | |
- | === Have a third " | + | * Historical versions: https:// |
- | Would it be possible have an option to make all tables sortable within the wiki without extra tagging? I could live without all the options, but overwriting the default sort by setting a tag with options for a special table would be an extra bonus. --- [[user> | + | * GitHub revision history: https://github.com/ |
- | === Not compatible with plugin todo === | + | * Historical bugs/ |
- | The plugin isn't compatible with " | + | * current issue tracker: https://github.com/FyiurAmron/ |
plugin/sortablejs.txt · Last modified: 2024-02-08 09:11 by LMS23