A tumblelog CMS built on AJAX, PHP and MySQL.

sortable.js 9.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  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-2006 Stuart Langridge, Joost de Valk.
  6. Version 1.5.6
  7. */
  8. /* You can change these values */
  9. var image_path = "http://www.joostdevalk.nl/code/sortable-table/";
  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 == "") {
  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. sortfn = ts_sort_caseinsensitive;
  93. if (itm.match(/^\d\d[\/\.-][a-zA-z][a-zA-Z][a-zA-Z][\/\.-]\d\d\d\d$/)) sortfn = ts_sort_date;
  94. if (itm.match(/^\d\d[\/\.-]\d\d[\/\.-]\d\d\d{2}?$/)) sortfn = ts_sort_date;
  95. if (itm.match(/^-?[£$€Û¢´]\d/)) sortfn = ts_sort_numeric;
  96. if (itm.match(/^-?(\d+[,\.]?)+(E[-+][\d]+)?%?$/)) sortfn = ts_sort_numeric;
  97. SORT_COLUMN_INDEX = column;
  98. var firstRow = new Array();
  99. var newRows = new Array();
  100. for (k=0;k<t.tBodies.length;k++) {
  101. for (i=0;i<t.tBodies[k].rows[0].length;i++) {
  102. firstRow[i] = t.tBodies[k].rows[0][i];
  103. }
  104. }
  105. for (k=0;k<t.tBodies.length;k++) {
  106. if (!thead) {
  107. // Skip the first row
  108. for (j=1;j<t.tBodies[k].rows.length;j++) {
  109. newRows[j-1] = t.tBodies[k].rows[j];
  110. }
  111. } else {
  112. // Do NOT skip the first row
  113. for (j=0;j<t.tBodies[k].rows.length;j++) {
  114. newRows[j] = t.tBodies[k].rows[j];
  115. }
  116. }
  117. }
  118. newRows.sort(sortfn);
  119. if (span.getAttribute("sortdir") == 'down') {
  120. ARROW = '&nbsp;&nbsp;<img src="'+ image_path + image_down + '" alt="&darr;"/>';
  121. newRows.reverse();
  122. span.setAttribute('sortdir','up');
  123. } else {
  124. ARROW = '&nbsp;&nbsp;<img src="'+ image_path + image_up + '" alt="&uarr;"/>';
  125. span.setAttribute('sortdir','down');
  126. }
  127. // We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
  128. // don't do sortbottom rows
  129. for (i=0; i<newRows.length; i++) {
  130. if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) {
  131. t.tBodies[0].appendChild(newRows[i]);
  132. }
  133. }
  134. // do sortbottom rows only
  135. for (i=0; i<newRows.length; i++) {
  136. if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1))
  137. t.tBodies[0].appendChild(newRows[i]);
  138. }
  139. // Delete any other arrows there may be showing
  140. var allspans = document.getElementsByTagName("span");
  141. for (var ci=0;ci<allspans.length;ci++) {
  142. if (allspans[ci].className == 'sortarrow') {
  143. if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us?
  144. allspans[ci].innerHTML = '&nbsp;&nbsp;<img src="'+ image_path + image_none + '" alt="&darr;"/>';
  145. }
  146. }
  147. }
  148. span.innerHTML = ARROW;
  149. alternate(t);
  150. }
  151. function getParent(el, pTagName) {
  152. if (el == null) {
  153. return null;
  154. } else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) {
  155. return el;
  156. } else {
  157. return getParent(el.parentNode, pTagName);
  158. }
  159. }
  160. function sort_date(date) {
  161. // y2k notes: two digit years less than 50 are treated as 20XX, greater than 50 are treated as 19XX
  162. dt = "00000000";
  163. if (date.length == 11) {
  164. mtstr = date.substr(3,3);
  165. mtstr = mtstr.toLowerCase();
  166. switch(mtstr) {
  167. case "jan": var mt = "01"; break;
  168. case "feb": var mt = "02"; break;
  169. case "mar": var mt = "03"; break;
  170. case "apr": var mt = "04"; break;
  171. case "may": var mt = "05"; break;
  172. case "jun": var mt = "06"; break;
  173. case "jul": var mt = "07"; break;
  174. case "aug": var mt = "08"; break;
  175. case "sep": var mt = "09"; break;
  176. case "oct": var mt = "10"; break;
  177. case "nov": var mt = "11"; break;
  178. case "dec": var mt = "12"; break;
  179. // default: var mt = "00";
  180. }
  181. dt = date.substr(7,4)+mt+date.substr(0,2);
  182. return dt;
  183. } else if (date.length == 10) {
  184. if (europeandate == false) {
  185. dt = date.substr(6,4)+date.substr(0,2)+date.substr(3,2);
  186. return dt;
  187. } else {
  188. dt = date.substr(6,4)+date.substr(3,2)+date.substr(0,2);
  189. return dt;
  190. }
  191. } else if (date.length == 8) {
  192. yr = date.substr(6,2);
  193. if (parseInt(yr) < 50) {
  194. yr = '20'+yr;
  195. } else {
  196. yr = '19'+yr;
  197. }
  198. if (europeandate == true) {
  199. dt = yr+date.substr(3,2)+date.substr(0,2);
  200. return dt;
  201. } else {
  202. dt = yr+date.substr(0,2)+date.substr(3,2);
  203. return dt;
  204. }
  205. }
  206. return dt;
  207. }
  208. function ts_sort_date(a,b) {
  209. dt1 = sort_date(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
  210. dt2 = sort_date(ts_getInnerText(b.cells[SORT_COLUMN_INDEX]));
  211. if (dt1==dt2) {
  212. return 0;
  213. }
  214. if (dt1<dt2) {
  215. return -1;
  216. }
  217. return 1;
  218. }
  219. function ts_sort_numeric(a,b) {
  220. var aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
  221. aa = clean_num(aa);
  222. var bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
  223. bb = clean_num(bb);
  224. return compare_numeric(aa,bb);
  225. }
  226. function compare_numeric(a,b) {
  227. var a = parseFloat(a);
  228. a = (isNaN(a) ? 0 : a);
  229. var b = parseFloat(b);
  230. b = (isNaN(b) ? 0 : b);
  231. return a - b;
  232. }
  233. function ts_sort_caseinsensitive(a,b) {
  234. aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
  235. bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
  236. if (aa==bb) {
  237. return 0;
  238. }
  239. if (aa<bb) {
  240. return -1;
  241. }
  242. return 1;
  243. }
  244. function ts_sort_default(a,b) {
  245. aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
  246. bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
  247. if (aa==bb) {
  248. return 0;
  249. }
  250. if (aa<bb) {
  251. return -1;
  252. }
  253. return 1;
  254. }
  255. function addEvent(elm, evType, fn, useCapture)
  256. // addEvent and removeEvent
  257. // cross-browser event handling for IE5+, NS6 and Mozilla
  258. // By Scott Andrew
  259. {
  260. if (elm.addEventListener){
  261. elm.addEventListener(evType, fn, useCapture);
  262. return true;
  263. } else if (elm.attachEvent){
  264. var r = elm.attachEvent("on"+evType, fn);
  265. return r;
  266. } else {
  267. alert("Handler could not be removed");
  268. }
  269. }
  270. function clean_num(str) {
  271. str = str.replace(new RegExp(/[^-?0-9.]/g),"");
  272. return str;
  273. }
  274. function trim(s) {
  275. while (s.substring(0,1) == ' ') {
  276. s = s.substring(1,s.length);
  277. }
  278. while (s.substring(s.length-1,s.length) == ' ') {
  279. s = s.substring(0,s.length-1);
  280. }
  281. return s;
  282. }
  283. function alternate(table) {
  284. // Take object table and get all it's tbodies.
  285. var tableBodies = table.getElementsByTagName("tbody");
  286. // Loop through these tbodies
  287. for (var i = 0; i < tableBodies.length; i++) {
  288. // Take the tbody, and get all it's rows
  289. var tableRows = tableBodies[i].getElementsByTagName("tr");
  290. // Loop through these rows
  291. // Start at 1 because we want to leave the heading row untouched
  292. for (var j = 0; j < tableRows.length; j++) {
  293. // Check if j is even, and apply classes for both possible results
  294. if ( (j % 2) == 0 ) {
  295. if ( !(tableRows[j].className.indexOf('odd') == -1) ) {
  296. tableRows[j].className = tableRows[j].className.replace('odd', 'even');
  297. } else {
  298. if ( tableRows[j].className.indexOf('even') == -1 ) {
  299. tableRows[j].className += " even";
  300. }
  301. }
  302. } else {
  303. if ( !(tableRows[j].className.indexOf('even') == -1) ) {
  304. tableRows[j].className = tableRows[j].className.replace('even', 'odd');
  305. } else {
  306. if ( tableRows[j].className.indexOf('odd') == -1 ) {
  307. tableRows[j].className += " odd";
  308. }
  309. }
  310. }
  311. }
  312. }
  313. }