2
0

sortable.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. /*
  2. Table sorting script by Joost de Valk, check it out at http://www.joostdevalk.nl/code/sortable-table/.
  3. Based on a script from http://www.kryogenix.org/code/browser/sorttable/.
  4. Distributed under the MIT license: http://www.kryogenix.org/code/browser/licence.html .
  5. Copyright (c) 1997-2007 Stuart Langridge, Joost de Valk.
  6. Version 1.5.7
  7. */
  8. /* You can change these values */
  9. var image_path = "";
  10. var image_up = "arrow-up.gif";
  11. var image_down = "arrow-down.gif";
  12. var image_none = "arrow-none.gif";
  13. var europeandate = true;
  14. var alternate_row_colors = true;
  15. /* Don't change anything below this unless you know what you're doing */
  16. addEvent(window, "load", sortables_init);
  17. var SORT_COLUMN_INDEX;
  18. var thead = false;
  19. function sortables_init() {
  20. // Find all tables with class sortable and make them sortable
  21. if (!document.getElementsByTagName) return;
  22. tbls = document.getElementsByTagName("table");
  23. for (ti=0;ti<tbls.length;ti++) {
  24. thisTbl = tbls[ti];
  25. if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {
  26. ts_makeSortable(thisTbl);
  27. }
  28. }
  29. }
  30. function ts_makeSortable(t) {
  31. if (t.rows && t.rows.length > 0) {
  32. if (t.tHead && t.tHead.rows.length > 0) {
  33. var firstRow = t.tHead.rows[t.tHead.rows.length-1];
  34. thead = true;
  35. } else {
  36. var firstRow = t.rows[0];
  37. }
  38. }
  39. if (!firstRow) return;
  40. // We have a first row: assume it's the header, and make its contents clickable links
  41. for (var i=0;i<firstRow.cells.length;i++) {
  42. var cell = firstRow.cells[i];
  43. var txt = ts_getInnerText(cell);
  44. if (cell.className != "unsortable" && cell.className.indexOf("unsortable") == -1) {
  45. cell.innerHTML = '<a href="#" class="sortheader" onclick="ts_resortTable(this, '+i+');return false;">'+txt+'<span class="sortarrow">&nbsp;&nbsp;<img src="'+ image_path + image_none + '" alt="&darr;"/></span></a>';
  46. }
  47. }
  48. if (alternate_row_colors) {
  49. alternate(t);
  50. }
  51. }
  52. function ts_getInnerText(el) {
  53. if (typeof el == "string") return el;
  54. if (typeof el == "undefined") { return el };
  55. if (el.innerText) return el.innerText; //Not needed but it is faster
  56. var str = "";
  57. var cs = el.childNodes;
  58. var l = cs.length;
  59. for (var i = 0; i < l; i++) {
  60. switch (cs[i].nodeType) {
  61. case 1: //ELEMENT_NODE
  62. str += ts_getInnerText(cs[i]);
  63. break;
  64. case 3: //TEXT_NODE
  65. str += cs[i].nodeValue;
  66. break;
  67. }
  68. }
  69. return str;
  70. }
  71. function ts_resortTable(lnk, clid) {
  72. var span;
  73. for (var ci=0;ci<lnk.childNodes.length;ci++) {
  74. if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];
  75. }
  76. var spantext = ts_getInnerText(span);
  77. var td = lnk.parentNode;
  78. var column = clid || td.cellIndex;
  79. var t = getParent(td,'TABLE');
  80. // Work out a type for the column
  81. if (t.rows.length <= 1) return;
  82. var itm = "";
  83. var i = 1;
  84. while (itm == "" && i < t.tBodies[0].rows.length) {
  85. var itm = ts_getInnerText(t.tBodies[0].rows[i].cells[column]);
  86. itm = trim(itm);
  87. if (itm.substr(0,4) == "<!--" || itm.length == 0) {
  88. itm = "";
  89. }
  90. i++;
  91. }
  92. if (itm == "") return;
  93. sortfn = ts_sort_caseinsensitive;
  94. if (itm.match(/^\d\d[\/\.-][a-zA-z][a-zA-Z][a-zA-Z][\/\.-]\d\d\d\d$/)) sortfn = ts_sort_date;
  95. if (itm.match(/^\d\d[\/\.-]\d\d[\/\.-]\d\d\d{2}?$/)) sortfn = ts_sort_date;
  96. if (itm.match(/^-?[£$€Û¢´]\d/)) sortfn = ts_sort_numeric;
  97. // ignore stuff in () after the numbers.
  98. if (itm.match(/^-?(\d+[,\.]?)+(E[-+][\d]+)?%?( \(.*\))?$/)) sortfn = ts_sort_numeric;
  99. SORT_COLUMN_INDEX = column;
  100. var firstRow = new Array();
  101. var newRows = new Array();
  102. for (k=0;k<t.tBodies.length;k++) {
  103. for (i=0;i<t.tBodies[k].rows[0].length;i++) {
  104. firstRow[i] = t.tBodies[k].rows[0][i];
  105. }
  106. }
  107. for (k=0;k<t.tBodies.length;k++) {
  108. if (!thead) {
  109. // Skip the first row
  110. for (j=1;j<t.tBodies[k].rows.length;j++) {
  111. newRows[j-1] = t.tBodies[k].rows[j];
  112. }
  113. } else {
  114. // Do NOT skip the first row
  115. for (j=0;j<t.tBodies[k].rows.length;j++) {
  116. newRows[j] = t.tBodies[k].rows[j];
  117. }
  118. }
  119. }
  120. newRows.sort(sortfn);
  121. if (span.getAttribute("sortdir") == 'down') {
  122. ARROW = '&nbsp;&nbsp;<img src="'+ image_path + image_down + '" alt="&darr;"/>';
  123. newRows.reverse();
  124. span.setAttribute('sortdir','up');
  125. } else {
  126. ARROW = '&nbsp;&nbsp;<img src="'+ image_path + image_up + '" alt="&uarr;"/>';
  127. span.setAttribute('sortdir','down');
  128. }
  129. // We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
  130. // don't do sortbottom rows
  131. for (i=0; i<newRows.length; i++) {
  132. if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) {
  133. t.tBodies[0].appendChild(newRows[i]);
  134. }
  135. }
  136. // do sortbottom rows only
  137. for (i=0; i<newRows.length; i++) {
  138. if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1))
  139. t.tBodies[0].appendChild(newRows[i]);
  140. }
  141. // Delete any other arrows there may be showing
  142. var allspans = document.getElementsByTagName("span");
  143. for (var ci=0;ci<allspans.length;ci++) {
  144. if (allspans[ci].className == 'sortarrow') {
  145. if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us?
  146. allspans[ci].innerHTML = '&nbsp;&nbsp;<img src="'+ image_path + image_none + '" alt="&darr;"/>';
  147. }
  148. }
  149. }
  150. span.innerHTML = ARROW;
  151. alternate(t);
  152. }
  153. function getParent(el, pTagName) {
  154. if (el == null) {
  155. return null;
  156. } else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) {
  157. return el;
  158. } else {
  159. return getParent(el.parentNode, pTagName);
  160. }
  161. }
  162. function sort_date(date) {
  163. // y2k notes: two digit years less than 50 are treated as 20XX, greater than 50 are treated as 19XX
  164. dt = "00000000";
  165. if (date.length == 11) {
  166. mtstr = date.substr(3,3);
  167. mtstr = mtstr.toLowerCase();
  168. switch(mtstr) {
  169. case "jan": var mt = "01"; break;
  170. case "feb": var mt = "02"; break;
  171. case "mar": var mt = "03"; break;
  172. case "apr": var mt = "04"; break;
  173. case "may": var mt = "05"; break;
  174. case "jun": var mt = "06"; break;
  175. case "jul": var mt = "07"; break;
  176. case "aug": var mt = "08"; break;
  177. case "sep": var mt = "09"; break;
  178. case "oct": var mt = "10"; break;
  179. case "nov": var mt = "11"; break;
  180. case "dec": var mt = "12"; break;
  181. // default: var mt = "00";
  182. }
  183. dt = date.substr(7,4)+mt+date.substr(0,2);
  184. return dt;
  185. } else if (date.length == 10) {
  186. if (europeandate == false) {
  187. dt = date.substr(6,4)+date.substr(0,2)+date.substr(3,2);
  188. return dt;
  189. } else {
  190. dt = date.substr(6,4)+date.substr(3,2)+date.substr(0,2);
  191. return dt;
  192. }
  193. } else if (date.length == 8) {
  194. yr = date.substr(6,2);
  195. if (parseInt(yr) < 50) {
  196. yr = '20'+yr;
  197. } else {
  198. yr = '19'+yr;
  199. }
  200. if (europeandate == true) {
  201. dt = yr+date.substr(3,2)+date.substr(0,2);
  202. return dt;
  203. } else {
  204. dt = yr+date.substr(0,2)+date.substr(3,2);
  205. return dt;
  206. }
  207. }
  208. return dt;
  209. }
  210. function ts_sort_date(a,b) {
  211. dt1 = sort_date(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
  212. dt2 = sort_date(ts_getInnerText(b.cells[SORT_COLUMN_INDEX]));
  213. if (dt1==dt2) {
  214. return 0;
  215. }
  216. if (dt1<dt2) {
  217. return -1;
  218. }
  219. return 1;
  220. }
  221. function ts_sort_numeric(a,b) {
  222. var aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
  223. aa = clean_num(aa);
  224. var bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
  225. bb = clean_num(bb);
  226. return compare_numeric(aa,bb);
  227. }
  228. function compare_numeric(a,b) {
  229. var a = parseFloat(a);
  230. a = (isNaN(a) ? 0 : a);
  231. var b = parseFloat(b);
  232. b = (isNaN(b) ? 0 : b);
  233. return a - b;
  234. }
  235. function ts_sort_caseinsensitive(a,b) {
  236. aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
  237. bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
  238. if (aa==bb) {
  239. return 0;
  240. }
  241. if (aa<bb) {
  242. return -1;
  243. }
  244. return 1;
  245. }
  246. function ts_sort_default(a,b) {
  247. aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
  248. bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
  249. if (aa==bb) {
  250. return 0;
  251. }
  252. if (aa<bb) {
  253. return -1;
  254. }
  255. return 1;
  256. }
  257. function addEvent(elm, evType, fn, useCapture)
  258. // addEvent and removeEvent
  259. // cross-browser event handling for IE5+, NS6 and Mozilla
  260. // By Scott Andrew
  261. {
  262. if (elm.addEventListener){
  263. elm.addEventListener(evType, fn, useCapture);
  264. return true;
  265. } else if (elm.attachEvent){
  266. var r = elm.attachEvent("on"+evType, fn);
  267. return r;
  268. } else {
  269. alert("Handler could not be removed");
  270. }
  271. }
  272. function clean_num(str) {
  273. str = str.replace(new RegExp(/[^-?0-9.]/g),"");
  274. return str;
  275. }
  276. function trim(s) {
  277. return s.replace(/^\s+|\s+$/g, "");
  278. }
  279. function alternate(table) {
  280. // Take object table and get all it's tbodies.
  281. var tableBodies = table.getElementsByTagName("tbody");
  282. // Loop through these tbodies
  283. for (var i = 0; i < tableBodies.length; i++) {
  284. // Take the tbody, and get all it's rows
  285. var tableRows = tableBodies[i].getElementsByTagName("tr");
  286. // Loop through these rows
  287. // Start at 1 because we want to leave the heading row untouched
  288. for (var j = 0; j < tableRows.length; j++) {
  289. // Check if j is even, and apply classes for both possible results
  290. if ( (j % 2) == 0 ) {
  291. if ( !(tableRows[j].className.indexOf('odd') == -1) ) {
  292. tableRows[j].className = tableRows[j].className.replace('odd', 'even');
  293. } else {
  294. if ( tableRows[j].className.indexOf('even') == -1 ) {
  295. tableRows[j].className += " even";
  296. }
  297. }
  298. } else {
  299. if ( !(tableRows[j].className.indexOf('even') == -1) ) {
  300. tableRows[j].className = tableRows[j].className.replace('even', 'odd');
  301. } else {
  302. if ( tableRows[j].className.indexOf('odd') == -1 ) {
  303. tableRows[j].className += " odd";
  304. }
  305. }
  306. }
  307. }
  308. }
  309. }