473,542 Members | 2,013 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Collapsible table sorting problem

Hello all,

I have a very simple html table with collapsible rows and sorting
capabilities. The collapsible row is hidden with css rule
(display:none). When one clicks in the left of the expandable row, the
hidden row is made visible with css. The problem is when i sort the
rows, the hidden rows get sorted as well which i don't want and want
to be moved (while sorting) relative to their parent rows. The
following is my complete html code with javascript. Just copy the
entire code to new html file and see the problem yourselves. Any
suggestions/help would be greatly appreciated. PS: The javascript code
is not written by me, i just plugged them to here.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Expandible row test in firefox</title>
  4. <STYLE type="text/css">
  5. ..collapsed
  6. {
  7. DISPLAY: none;
  8. }
  9. </STYLE>
  10.  
  11. <script language="javascript" type="text/javascript">
  12. //***collapsible rows
  13. function outliner(evt) {
  14. evt = (evt) ? evt : (window.event) ? window.event : "";
  15. var oMe;
  16. if (evt.srcElement) {
  17. oMe = evt.srcElement;
  18. } else if (evt.target) {
  19. oMe = evt.target;
  20. }
  21. if (evt.srcElement) {
  22. //for IE
  23. var child =
  24. document.all[oMe.getAttribute("child",false)];
  25.  
  26. }
  27. else {
  28. //for Firefox
  29. var child =
  30. document.all[oMe.getAttribute("child",false)];
  31.  
  32. }
  33.  
  34. //get child element
  35. //if child element exists, expand or collapse it.
  36. if (null != child)
  37. child.className = child.className == "collapsed" ? "expanded" :
  38. "collapsed";
  39. }
  40.  
  41. function changepic(evt) {
  42. evt = (evt) ? evt : (window.event) ? window.event : "";
  43. var uMe;
  44. if (evt.srcElement) {
  45. uMe = evt.srcElement;
  46. } else if (evt.target) {
  47. uMe = evt.target;
  48. }
  49.  
  50. var check = uMe.src.toLowerCase();
  51. if (check.lastIndexOf("expand.gif") != -1)
  52. {
  53. uMe.src = "collapse.gif";
  54. }
  55. else
  56. {
  57. uMe.src = "expand.gif";
  58. }
  59. }
  60.  
  61. //*** SORTABLE ROWS
  62. var ts_version = "1.26";
  63. var ts_browser_agt = navigator.userAgent.toLowerCase();
  64. var ts_browser_is_ie = ((ts_browser_agt.indexOf("msie") != -1) &&
  65. (ts_browser_agt.indexOf("opera") == -1));
  66.  
  67. var ml_tsort = {
  68. // configurable constants, modify as needed!
  69. sort_col_title : "Click to Sort!", // the popup text for the sorting
  70. link in the header columns
  71. sort_col_asc_title : "Sorted ascending", // the popup text for the
  72. sorting link in the header column after the column's sorted in
  73. ascending order
  74. sort_col_desc_title : "Sorted Descending ", // the popup text for
  75. the sorting link in the header column after the column's sorted in
  76. ascending order
  77. sort_col_class : "abc", // whichever class you want the heading to
  78. be
  79. sort_col_style : "text-decoration:none; font-weight:bold;
  80. color:black", // whichever style you want the link to look like
  81. sort_col_class_post_sort : "def", // whichever class you want the
  82. heading for the column that's just sorted
  83. sort_col_style_post_sort : "text-decoration:none; font-weight:bold;
  84. color:black", // whichever style you want the link to look like when
  85. the column for the link was sorted
  86. sort_col_mouseover : "this.style.color='blue'", // what style the
  87. link should use onmouseover?
  88. use_ctrl_alt_click : true, // allow ctrl-alt-click anywhere in table
  89. to activate sorting?
  90. sort_only_sortable : true, // make all tables sortable by default or
  91. just make the tables with "sortable" class sortable?
  92.  
  93. // speed related constants, modify as needed!
  94. table_content_might_change : false, // table content could be
  95. changed by other JS on-the-fly? if so, some speed improvements cannot
  96. be used.
  97. preserve_style : " ", // (row, cell) preserves style for row or cell
  98. e.g., row is useful when the table highlights rows alternatively. cell
  99. is much slower while no preservation's the fastest by far!
  100. tell_me_time_consumption : false, // give stats about time consumed
  101. during sorting and table update/redrawing.
  102.  
  103. // anything below this line, modify at your own risk! ;)
  104. smallest_int : -2147483648000, // date parse is in milliseconds,
  105. hence the 000
  106. set_vars : function(event)
  107. {
  108. var e = (event)? event : window.event;
  109. var element = (event)? ((event.target)? event.target :
  110. event.srcElement) : window.event.srcElement;
  111. var clicked_td = ml_tsort.getParent(element,'TD') ||
  112. ml_tsort.getParent(element,'TH');
  113. var table = ml_tsort.getParent(element,'TABLE');
  114. if(!table || table.rows.length < 1 || !clicked_td) return;
  115. var column = clicked_td.cellIndex;
  116. if (e.altKey && e.ctrlKey && ml_tsort.use_ctrl_alt_click)
  117. ml_tsort.resortTable(table.rows[0].cells[column]);
  118. },
  119.  
  120. makeSortable: function(table)
  121. {
  122. if (table.rows && table.rows.length 0) {
  123. var rowidx = table.getAttribute("ts_linkrow") || 0;
  124. var firstRow = table.rows[rowidx];
  125. }
  126. if (!firstRow) return;
  127. var sortCell;
  128. // We have a first row: assume it's the header (it works for
  129. <theadtoo),
  130. // and make its contents clickable links
  131. for (var i=0;i<firstRow.cells.length;i++) {
  132. var cell = firstRow.cells[i];
  133. if(cell.getAttribute("ts_nosort")) continue;
  134. var txt = cell.innerHTML;
  135. if(cell.getAttribute("sortdir")) sortCell = cell;
  136. cell.innerHTML = '<a style="'+this.sort_col_style+'"
  137. onMouseOver="this.oldstyle=this.style.cssText;'+this.sort_col_mouseover
  138. +'" onMouseOut="this.style.cssText=this.oldstyle;"
  139. class="'+this.sort_col_class+'" href="#" title="'+this.sort_col_title
  140. +'" onclick="javascript:ml_tsort.resortTable(this.parentNode);return
  141. false">'+txt+'</a>';
  142. }
  143. if(sortCell) this.resortTable(sortCell);
  144. },
  145.  
  146. sortables_init : function()
  147. {
  148. // Find all tables with class sortable and make them sortable
  149. if (!document.getElementsByTagName) return;
  150. var tbls = document.getElementsByTagName("table");
  151. for (var ti=0;ti<tbls.length;ti++) {
  152. thisTbl = tbls[ti];
  153. if(!ml_tsort.sort_only_sortable || thisTbl.className.match(/
  154. sortable/i))
  155. ml_tsort.makeSortable(thisTbl);
  156. }
  157. },
  158.  
  159. getParent : function(el, pTagName)
  160. {
  161. if (el == null) return null;
  162. else if (el.nodeType == 1 && el.tagName.toLowerCase() ==
  163. pTagName.toLowerCase())    // Gecko bug, supposed to be uppercase
  164. return el;
  165. else
  166. return this.getParent(el.parentNode, pTagName);
  167. },
  168.  
  169. getInnerText : function(el)
  170. {
  171. if (typeof el == "string") return el;
  172. if (typeof el == "undefined") { return el };
  173. if (el.innerText) return el.innerText;    //Not needed but it is
  174. faster
  175. var str = "";
  176.  
  177. var cs = el.childNodes;
  178. var l = cs.length;
  179. for (var i = 0; i < l; i=i++) {
  180. switch (cs[i].nodeType) {
  181. case 1: //ELEMENT_NODE
  182. str += this.getInnerText(cs[i]);
  183. break;
  184. case 3:    //TEXT_NODE
  185. str += cs[i].nodeValue;
  186. break;
  187. }
  188. }
  189. return str;
  190. },
  191.  
  192. match_date_format : function(value, format)
  193. {
  194. var v = this.getInnerText(value.cells[this.sort_column_index]);
  195. this.set_date_array(format);
  196. if(format == 'M/D/Y' && !isNaN(Date.parse(v)))
  197. return true;
  198. else if(!isNaN(this.convert_date(v))) return true;
  199. this.set_date_array(format.replace(/\//g, '-'));
  200. if(!isNaN(this.convert_date(v))) return true;
  201. this.set_date_array(format.replace(/\//g, '.'));
  202. if(!isNaN(this.convert_date(v))) return true;
  203. this.set_date_array(format.replace(/\//g, ' '));
  204. if(!isNaN(this.convert_date(v))) return true;
  205. return false;
  206. },
  207.  
  208. resortTable : function(td)
  209. {
  210. if(td == null) return;
  211. var column = td.cellIndex;
  212. var table = this.getParent(td,'TABLE');
  213. this.sort_column_index = column;
  214. if(table == null || table.rows.length <= 2) return;
  215.  
  216. var lastSortCell = table.getAttribute("ts_sortcell") || 0;
  217. lastSortCell--; // the processing is used for IE, which treats no
  218. attribute as 0, while FF treats 0 as still true.
  219. var lastSortDir;
  220. if(td.getAttribute("ts_forcesort"))
  221. lastSortDir = (td.getAttribute("ts_forcesort") == 'desc')?
  222. 'asc' : 'desc';
  223. else
  224. lastSortDir = (table == this.last_sorted_table && column ==
  225. lastSortCell)? table.getAttribute("ts_sortdir") :
  226. ((td.getAttribute("sortdir") == 'desc')? 'asc' : 'desc');
  227.  
  228. var newRows = new Array();
  229. var headcount = 1;
  230. for (var i=0,j=1;j<table.rows.length;j++)
  231. {
  232. var t = table.rows[j].parentNode.tagName.toLowerCase();
  233. if(t == 'tbody' && table.rows[j].cells.length >= column + 1)
  234. newRows[i++] = table.rows[j];
  235. else if(t == 'thead') headcount++;
  236. }
  237. if(newRows.length == 0) return;
  238. var time2 = new Date();
  239.  
  240. // check if we really need to sort
  241. if(!td.getAttribute("ts_forcesort") && !
  242. this.table_content_might_change && table == this.last_sorted_table &&
  243. column == lastSortCell)
  244. newRows.reverse();
  245. else
  246. {
  247. // Work out a type for the column
  248. var sortfn, type = td.getAttribute("ts_type");
  249. this.replace_pattern = '';
  250. var itm, i;
  251. for(i = 0; i < newRows.length; i++)
  252. {
  253. itm = this.getInnerText(newRows[i].cells[column]);
  254. if(itm.match(/\S/)) break;
  255. }
  256. if(i == newRows.length) return;
  257. itm = ml_trim(itm);
  258. if(!type)
  259. {
  260. sortfn = this.sort_caseinsensitive;
  261.  
  262. if (this.match_date_format(newRows[i], 'M/D/Y')) sortfn =
  263. this.sort_date;
  264. else if (itm.match(/^[¬•¬£‚,¨$]/)) sortfn =
  265. this.sort_currency;
  266. else if (itm.match(/^\d{1,3}(\.\d{1,3}){3}$/)) sortfn =
  267. this.sort_ip;
  268. else if (itm.match(/^[+-]?\s*[0-9]+(?:\.[0-9]+)?(?:\s*[eE]
  269. \s*[+-]?\s*\d+)?$/))
  270. sortfn = this.sort_numeric;
  271. }
  272. else if(type == 'date' && this.match_date_format(newRows[i], 'M/
  273. D/Y')) sortfn = this.sort_date;
  274. else if(type == 'euro_date' &&
  275. this.match_date_format(newRows[i], 'D/M/Y')) sortfn = this.sort_date;
  276. else if(type == 'other_date' &&
  277. this.match_date_format(newRows[i], td.getAttribute("ts_date_format")))
  278. sortfn = this.sort_date;
  279. else if(type == 'number') sortfn = this.sort_numeric;
  280. else if(type == 'ip') sortfn = this.sort_ip;
  281. else if(type == 'money') sortfn = this.sort_currency;
  282. //       else if(type == 'custom') sortfn = function(aa,bb) { a =
  283. this.getInnerText(aa.cells[this.sort_column_index]); b =
  284. this.getInnerText(bb.cells[this.sort_column_index]);
  285. eval(td.getAttribute("ts_sortfn")) }; // the coding here is shorter
  286. but interestingly it's also slower
  287. else if(type == 'custom') { this.custom_code =
  288. td.getAttribute("ts_sortfn"); sortfn = this.custom_sortfn }
  289. else { alert("unsupported sorting type or data not matching
  290. indicated type!"); return; }
  291.  
  292. table.setAttribute("ts_sortcell", column+1);
  293. newRows.sort(sortfn);
  294. if (lastSortDir == 'asc') newRows.reverse();
  295.  
  296. }
  297. // set style of heading
  298. var rowidx = table.getAttribute("ts_linkrow") || 0;
  299. if(lastSortCell -1 &&
  300. table.rows[rowidx].cells[lastSortCell].firstChild.style)
  301. {
  302. table.rows[rowidx].cells[lastSortCell].firstChild.oldstyle =
  303. this.sort_col_style;
  304. table.rows[rowidx].cells[lastSortCell].firstChild.style.cssText
  305. = this.sort_col_style;
  306. table.rows[rowidx].cells[lastSortCell].firstChild.className =
  307. this.sort_col_class;
  308. }
  309. if(table.rows[rowidx].cells[column].firstChild.style)
  310. {
  311. table.rows[rowidx].cells[column].firstChild.oldstyle =
  312. this.sort_col_style_post_sort;
  313. table.rows[rowidx].cells[column].firstChild.style.cssText =
  314. this.sort_col_style_post_sort;
  315. table.rows[rowidx].cells[column].firstChild.className =
  316. this.sort_col_class_post_sort;
  317. }
  318. if (lastSortDir == 'desc') table.setAttribute('ts_sortdir','asc');
  319. else table.setAttribute('ts_sortdir','desc');
  320. // has to use tagName otherwise IE complains
  321. if(lastSortCell -1 &&
  322. table.rows[rowidx].cells[lastSortCell].firstChild.tagName)
  323. table.rows[rowidx].cells[lastSortCell].firstChild.title =
  324. this.sort_col_title;
  325. if(table.rows[rowidx].cells[column].firstChild.tagName)
  326. table.rows[rowidx].cells[column].firstChild.title = ((lastSortDir ==
  327. 'desc')? this.sort_col_asc_title : this.sort_col_desc_title);
  328.  
  329. this.last_sorted_table = table;
  330.  
  331. var time3 = new Date();
  332.  
  333. var ps = table.getAttribute("preserve_style") ||
  334. this.preserve_style;
  335. if(ps == 'row' && !ts_browser_is_ie)
  336. {
  337. var tmp = new Array(newRows.length);
  338. for (var i = 0; i < newRows.length; i++) tmp[i] =
  339. newRows[i].innerHTML;
  340. for (var i = 0; i < newRows.length; i++) table.rows[i
  341. +headcount].innerHTML = tmp[i];
  342. }
  343. else if(ps == 'cell' || (ps == 'row' && ts_browser_is_ie))
  344. {
  345. var tmp = new Array(newRows.length);
  346. for (var i = 0; i < newRows.length; i++)
  347. for (var j = 0; j < newRows[i].cells.length; j++)
  348. {
  349. if(!tmp[i]) tmp[i] = new Array(newRows[i].cells.length);
  350. tmp[i][j] = newRows[i].cells[j].innerHTML;
  351. }
  352. for (var i = 0; i < newRows.length; i++)
  353. for (var j = 0; j < newRows[i].cells.length; j++)
  354. table.rows[i+headcount].cells[j].innerHTML = tmp[i][j];
  355. }
  356. else
  357. {
  358. for (var i=0;i<newRows.length;i++) // We appendChild rows that
  359. already exist to the tbody, so it moves them rather than creating new
  360. ones
  361. table.tBodies[0].appendChild(newRows[i]);
  362. }
  363. var time4 = new Date();
  364. if(this.tell_me_time_consumption)
  365. {
  366. alert('it took ' + this.diff_time(time3, time2) + ' seconds to
  367. do sorting!');
  368. alert('it took ' + this.diff_time(time4, time3) + ' seconds to
  369. do redrawing!');
  370. }
  371. return false;
  372. },
  373.  
  374. diff_time : function(time2, time1)
  375. {
  376. return (time2.getTime() - time1.getTime())/1000;
  377. },
  378.  
  379. set_date_array : function(f)
  380. {
  381. var tmp = [['D', f.indexOf('D')], ['M', f.indexOf('M')], ['Y',
  382. f.indexOf('Y')]];
  383. tmp.sort(function(a,b){ return a[1] - b[1]});
  384. this.date_order_array = new Array(3);
  385. for(var i = 0; i < 3; i++) this.date_order_array[tmp[i][0]] = '$'
  386. + (i + 2);
  387. this.replace_pattern = f.replace(/[DMY]([^DMY]+)[DMY]([^DMY]+)
  388. [DMY]/, '^(.*?)(\\d+)\\$1(\\d+)\\$2(\\d+)(.*)$');
  389. },
  390.  
  391. process_year : function(y)
  392. {
  393. var tmp = parseInt(y);
  394. if(tmp < 32) return '20' + y;
  395. else if(tmp < 100) return '19' + y;
  396. else return y;
  397. },
  398.  
  399. // convert to MM/DD/YYYY (or M/D/YYYY) format
  400. convert_date : function(a)
  401. {
  402. var re = 'RegExp.$1+RegExp.'+this.date_order_array['M']+'+\'/
  403. \'+RegExp.'+this.date_order_array['D']+'+\'/
  404. \'+this.process_year(RegExp.'+this.date_order_array['Y']+')+RegExp.
  405. $5';
  406. var code = 'if(a.match(/'+this.replace_pattern+'/)) (' + re + ')';
  407. return Date.parse(eval(code));
  408. },
  409.  
  410. sort_date : function(a,b)
  411. {
  412. var atext =
  413. ml_tsort.getInnerText(a.cells[ml_tsort.sort_column_index]);
  414. var btext =
  415. ml_tsort.getInnerText(b.cells[ml_tsort.sort_column_index]);
  416. var aa, bb;
  417. if(atext && atext.match(/\S/))
  418. {
  419. aa = ml_tsort.convert_date(atext);
  420. if(isNaN(aa)) aa = Date.parse(atext);
  421. if(isNaN(aa)) aa = 0;
  422. }
  423. else aa = ml_tsort.smallest_int;
  424. if(btext && btext.match(/\S/))
  425. {
  426. bb = ml_tsort.convert_date(btext);
  427. if(isNaN(bb)) bb = Date.parse(btext);
  428. if(isNaN(bb)) bb = 0;
  429. }
  430. else bb = ml_tsort.smallest_int;
  431. return aa - bb;
  432. },
  433.  
  434. sort_currency : function(a,b)
  435. {
  436. return
  437. ml_tsort.sort_num(ml_tsort.getInnerText(a.cells[ml_tsort.sort_column_index]).replace(/
  438. [^-0-9.+]/g,''),
  439.  
  440. ml_tsort.getInnerText(b.cells[ml_tsort.sort_column_index]).replace(/
  441. [^-0-9.+]/g,''));
  442. },
  443.  
  444. sort_num : function(a, b)
  445. {
  446. var aa, bb;
  447. if(a && a.match(/\S/))
  448. {
  449. if(!isNaN(a)) aa = a;
  450. else if(a && a.match(/^[^0-9.+-]*([+-]?\s*[0-9]+(?:\.[0-9]+)?
  451. (?:\s*[eE]\s*[+-]?\s*\d+)?)/))
  452. aa = parseFloat(RegExp.$1.replace(/\s+/g, ''));
  453. else aa = 0;
  454. }
  455. else aa = ml_tsort.smallest_int;
  456. if(b && b.match(/\S/))
  457. {
  458. if(!isNaN(b)) bb = b;
  459. else if(b && b.match(/^[^0-9.+-]*([+-]?\s*[0-9]+(?:\.[0-9]+)?
  460. (?:\s*[eE]\s*[+-]?\s*\d+)?)/))
  461. bb = parseFloat(RegExp.$1.replace(/\s+/g, ''));
  462. else bb = 0;
  463. }
  464. else bb = ml_tsort.smallest_int;
  465. return aa - bb;
  466. },
  467.  
  468. sort_numeric : function(a,b)
  469. {
  470. return
  471. ml_tsort.sort_num(ml_tsort.getInnerText(a.cells[ml_tsort.sort_column_index]),
  472.  
  473. ml_tsort.getInnerText(b.cells[ml_tsort.sort_column_index]));
  474. },
  475.  
  476. sort_ip : function(a,b)
  477. {
  478. var aa =
  479. ml_tsort.getInnerText(a.cells[ml_tsort.sort_column_index]).split('.');
  480. var bb =
  481. ml_tsort.getInnerText(b.cells[ml_tsort.sort_column_index]).split('.');
  482. return ml_tsort.sort_num(aa[0], bb[0]) ||
  483. ml_tsort.sort_num(aa[1], bb[1]) ||
  484. ml_tsort.sort_num(aa[2], bb[2]) ||
  485. ml_tsort.sort_num(aa[3], bb[3]);
  486. },
  487.  
  488. sort_caseinsensitive : function(a,b)
  489. {
  490. var aa =
  491. ml_tsort.getInnerText(a.cells[ml_tsort.sort_column_index]).toLowerCase();
  492. var bb =
  493. ml_tsort.getInnerText(b.cells[ml_tsort.sort_column_index]).toLowerCase();
  494. if (aa==bb) return 0;
  495. if (aa<bb) return -1;
  496. return 1;
  497. },
  498.  
  499. custom_sortfn : function(aa,bb)
  500. {
  501. var a =
  502. ml_tsort.getInnerText(aa.cells[ml_tsort.sort_column_index]);
  503. var b =
  504. ml_tsort.getInnerText(bb.cells[ml_tsort.sort_column_index]);
  505. return eval(ml_tsort.custom_code);
  506. }
  507. };
  508.  
  509. function ml_trim(text)
  510. {
  511. if(!text) return text;
  512. var tmp = text.replace(/^\s+/, '');
  513. return tmp.replace(/\s+$/, '');
  514. }
  515.  
  516. function ts_addEvent(elm, evType, fn, useCapture)
  517. // By Scott Andrew
  518. {
  519. if (elm.addEventListener){
  520. elm.addEventListener(evType, fn, useCapture);
  521. return true;
  522. } else if (elm.attachEvent){
  523. var r = elm.attachEvent("on"+evType, fn);
  524. return r;
  525. } else {
  526. alert("Handler could not be removed");
  527. }
  528. }
  529. ts_addEvent(document, "click", ml_tsort.set_vars);
  530. ts_addEvent(window, "load", ml_tsort.sortables_init);
  531. </script>
  532.  
  533. </head>
  534. <body onclick="outliner(event)">
  535. <table class="sortable" >
  536. <thead >
  537. <tr>
  538. <th class="header" width="1%" />
  539. <td class="header"Last Name:</td>
  540. <td class="header"First Name:</td>
  541. <td class="header"Gender:</td>
  542. </tr>
  543. </thead>
  544. <tr>
  545. <td><A><IMG border="0" alt="expand/collapse" class="expandable"
  546. height="11" onclick="changepic(event)" src="expand.gif" width="9"
  547. child="s1" p1="p1"></A></td>
  548.  
  549. <td>Rainbow</td>
  550. <td>Mark</td>
  551. <td>T</td>
  552. </tr>
  553. <tr>
  554.  
  555. <td colspan="4" bgcolor="cyan" class="collapsed" id="s1">
  556. <table>
  557.  
  558. <tr>
  559. <td  Mark T Rainbow</td>
  560. </tr>
  561. </table>
  562. </td>
  563. </tr>
  564. <tr>
  565. <td><A><IMG border="0" alt="expand/collapse" class="expandable"
  566. height="11" onclick="changepic(event)" src="expand.gif" width="9"
  567. child="s2" p21="p21" p22="p22" p22="p23"></A></td>
  568.  
  569. <td id="p21">Carlos</td>
  570. <td id="p22">Morris</td>
  571. <td id="p23">N</td>
  572. </tr>
  573. <tr>
  574. <td colspan="4" bgcolor="cyan" class="collapsed" id="s2">
  575. <table>
  576. <tr>
  577. <tr>
  578. <td  Carlos N Morris</td>
  579. </tr>
  580. </table>
  581. </td>
  582. </tr>
  583. </table>
  584. </body>
  585. </html>
  586.  
Feb 27 '07 #1
7 4801
On Feb 27, 10:53 am, "Kamal" <sendka...@gmai l.comwrote:
Hello all,

I have a very simple html table with collapsible rows and sorting
capabilities. The collapsible row is hidden with css rule
(display:none). When one clicks in the left of the expandable row, the
hidden row is made visible with css. The problem is when i sort the
rows, the hidden rows get sorted as well which i don't want and want
to be moved (while sorting) relative to their parent rows. The
following is my complete html code with javascript. Just copy the
entire code to new html file and see the problem yourselves. Any
suggestions/help would be greatly appreciated. PS: The javascript code
is not written by me, i just plugged them to here.
<*snip code*>

You have two incompatible models. The sort routine says
that each row is an individual record that can be compared
and sorted, and the html/display routines say that a
record is comprised of multiple rows sortable on the first
row for each record.
So, you can either change the sort routine to only compare
the first row of a record and move its connected rows en
masse or change the html/display so each record's data
is contained in one row.

---
Geoff
Feb 27 '07 #2
Geoffrey Summerhayes wrote:
On Feb 27, 10:53 am, Kamal wrote:
>I have a very simple html table with collapsible rows and
sorting capabilities. ...
<snip>
You have two incompatible models. The sort routine says
that each row is an individual record that can be compared
and sorted, and the html/display routines say that a
record is comprised of multiple rows sortable on the first
row for each record.
So, you can either change the sort routine to only compare
the first row of a record and move its connected rows en
masse or change the html/display so each record's data
is contained in one row.
The easiest HTML modification may be to place each group of rows into its
own TBODY and sort the TBODYs.

Richard.

Feb 27 '07 #3
Richard Cornford wrote:
The easiest HTML modification may be to place each group of rows into
its own TBODY and sort the TBODYs.
My table lib at
http://www.JavascriptToolbox.com/lib/table/
does exactly this - it sorts each tbody independently. So situations like
this will work fine.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Feb 28 '07 #4
On Feb 27, 7:23 pm, "Matt Kruse" <newsgro...@mat tkruse.comwrote :
Richard Cornford wrote:
The easiest HTML modification may be to place each group of rows into
its own TBODY and sort the TBODYs.

Mytablelib athttp://www.JavascriptT oolbox.com/lib/table/
does exactly this - it sorts each tbody independently. So situations like
this will work fine.

--
Matt Krusehttp://www.JavascriptT oolbox.comhttp://www.AjaxToolbox .com
Hi Matt,
Thank you so much for your reply. I am newbie to javascript. In fact,
i am using three different kinds of javascripts in my xslt (one for
expandible row, one for tabs and one for sorting tables). I would
really appreciate if you could tell me where to modify my existing
sorting script to make it sort for TBODYs. Hope to hear you soon.

Sincerely,
Kamal

Feb 28 '07 #5
Kamal wrote:
Thank you so much for your reply. I am newbie to javascript. In fact,
i am using three different kinds of javascripts in my xslt (one for
expandible row, one for tabs and one for sorting tables). I would
really appreciate if you could tell me where to modify my existing
sorting script to make it sort for TBODYs. Hope to hear you soon.
I have no idea what your existing sorting script looks like, so I would not
be able to help you modify it!

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Feb 28 '07 #6
On Feb 28, 3:00 pm, "Matt Kruse" <newsgro...@mat tkruse.comwrote :
Kamal wrote:
Thank you so much for your reply. I am newbie to javascript. In fact,
i am using three different kinds of javascripts in my xslt (one for
expandible row, one for tabs and one for sorting tables). I would
really appreciate if you could tell me where to modify my existing
sorting script to make it sort for TBODYs. Hope to hear you soon.

I have no idea what your existing sorting script looks like, so I would not
be able to help you modify it!

--
Matt Krusehttp://www.JavascriptT oolbox.comhttp://www.AjaxToolbox .com
Hi Matt,
I really appreciate your prompt response and willingness to support. I
am not sure what exactly you mean by "I have no idea what your
existing sorting script looks like". But the script is there within my
code section below //SORTABLE ROWS comment. I would also like to let u
know that i visited yr site and impressed and willing to donate if
this prob is sorted out with yr script. Have a good day.

Kamal

Feb 28 '07 #7
Kamal wrote:
I really appreciate your prompt response and willingness to support. I
am not sure what exactly you mean by "I have no idea what your
existing sorting script looks like". But the script is there within my
code section below //SORTABLE ROWS comment.
Ah, I didn't see your original message with the source in it. Unfortunately
it's a mess and unreadable, so I can't help you with it. You should contact
the author of the code itself, as I am in no position to sit down and debug
someone else's code and see how to fix it :)

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Feb 28 '07 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

17
3661
by: Matt Kruse | last post by:
I'm looking for the best JS/CSS solution to add functionality to tables. The only browser which needs to be supported is IE5.5+, but no activeX can be used. to be able to do: - Fixed header row - Data sorting (preferrably intelligently determining data type based on content) - If possible, locking the first column from scrolling
1
3860
by: jjjoic | last post by:
Hi, I use Access 2003 to generate the back-end data for a ColdFusion report at work. The report is sorted by a column and based on the sorting, rankings are assigned to each row(i.e. the biggest value gets No. 1, and then the row of the second biggest value is ranked as No. 2). Each task owners will then have to attack their owning issues...
2
1753
by: cluce | last post by:
i have a table sorting feature on my website that works everywhere else except in firefox. but the example code does work in firefox. this has me stumped. The problem is the links in the table headers wont show up so they can be clicked on to sort the colunm. here is my webpage code that displays the data in a table..... $get_list_sql =...
1
1631
by: mahesh123 | last post by:
I am using Collapsible Panel in my project.But in other form of my project i want to use collapsible panel inside other Collapsible panel.Is it possible. Both panels are to be dinamic.Is it possible can any one help me plz. My requirement is I am having different A's. Under each A Can have different B's. For each B can have diffrent...
0
3793
by: =?Utf-8?B?R2lvcmdpbw==?= | last post by:
Hi, I am having a problem and I need some help. I have a listview with a collapsible panel that has a updatepanel and listview inside updatepanel and I have a button that triggers the collapsible panel and this button is outside the updatepanel. The collapsible panel works well when the button is clicked and expands BUT the updatepanel...
6
4057
by: =?Utf-8?B?RGFu?= | last post by:
I am reposting a question from about 3 weeks ago ("sorting capability"). I have an aspx page in which I get the data from a database dynamically, through C# code, by creating a dynamic table using TableHeaderCell and TableHeaderRow. The data is binded to the table by using a DataSet and Data Reader. The responses on the forum made me...
0
1906
by: wojski696969 | last post by:
Hi.. I'm using ASP.NET AJAX Control Toolkit. I've got collapsible extender (CE) putted inside of modal popup extender (MPE), and there is a problem if i scroll the page when collapsible area is visible. I mean the shadow under MPE is getting bogger when CE is showing itself, and restores to previouse size after collapsible panel hides, but.....
5
8048
by: veenna | last post by:
i have a grid inside a collapsible panel in my page. on expand of collapsible panel i want to bind data to grid. how can i do this? how to get the events of collapsible panel. please help regards, veena.
5
4908
by: jrod11 | last post by:
hi, I found a jquery html table sorting code i have implemented. I am trying to figure out how to edit how many colums there are, but every time i remove code that I think controls how many colums there are, it crashes. There are currently 6 columns, and I only want 4. How do I remove the last two (discount and date)? Here is a link:...
0
7330
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7721
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7324
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7670
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
5867
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development projectóplanning, coding, testing, and deploymentówithout human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
3380
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3376
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
943
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
620
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.