sort table data with java script

Hi,

I have requirement to sort birt table data on click of columns. I found one customized java script for table and able to sort data properly. but when i add totals at the footer columns, its sorting the footer values also along with data rows. Is there any way to stop sorting the footer rows. attahced customized script used.

Thanks in advance
ub

Find more posts tagged with

Comments

thuston

There is nothing attached.

Why not just put the user in Interactive Viewer? Then they can sort on any column as needed.

mwilliams

Was the script like the script in the onPrepare of the table in the example in this forum post?

http://www.birt-exchange.org/org/forum/index.php/topic/17847-sorting-in-birt/

It uses a parameter, a drill through, and script to sort the table.

vsub

Hi, 
 
below sort java script, not able to attach the file. this customized java script which will work all tables without much change just you need provide bookmark name in table properties which should be similar to getElementById in script . but somehow its sorting the footer section also. 
 
Below is the script 
===================================================== 
<script type="text/javascript"> 
var stIsIE = /*@cc_on!;@*/false; 
var thisTable = document.getElementById('table1'); 
makeSortableWithAltColors(thisTable,"rgb(218,230,255)","rgb(255, 255, 255)"); 
 
//The following function is to client-side-sort the table with alternating row colors 
//The aternating colors are the second and third parameters 
 
 
 
function init() { 
 
// 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; 
 
sorttable.DATE_RE = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/; 
 
forEach(document.getElementsByTagName('table'), function(table) { 
if (table.className.search(/\bsortable\b/) != -1) { 
sorttable.makeSortable(table); 
} 
}); 
 
} 
 
//The following function is to client-side-sort the table with alternating row colors 
//The aternating colors are the second and third parameters 
 
 
function makeSortableWithAltColors(table,evenColor,oddColor) { 
//init(); 
if (table.getElementsByTagName('thead').length == 0) { 
the = document.createElement('thead'); 
the.appendChild(table.rows[0]); 
table.insertBefore(the,table.firstChild); 
} 
if (table.tHead == null) table.tHead = table.getElementsByTagName('thead')[0]; 
 
if (table.tHead.rows.length != 1) return; // can't cope with two header rows 
 
sortbottomrows = []; 
for (var i=0; i<table.rows.length; i++) { 
if (table.rows.className.search(/\bsortbottom\b/) != -1) { 
sortbottomrows[sortbottomrows.length] = table.rows; 
} 
} 
if (sortbottomrows) { 
if (table.tFoot == null) { 
tfo = document.createElement('tfoot'); 
table.appendChild(tfo); 
} 
for (var i=0; i<sortbottomrows.length; i++) { 
tfo.appendChild(sortbottomrows); 
} 
delete sortbottomrows; 
} 
 
headrow = table.tHead.rows[0].cells; 
for (var i=0; i<headrow.length; i++) { 
if (!headrow.className.match(/\bsorttable_nosort\b/)) { // skip this col 
mtch = headrow.className.match(/\bsorttable_([a-z0-9]+)\b/); 
if (mtch) { override = mtch[1]; } 
if (mtch && typeof sorttable["sort_"+override] == 'function') { 
headrow.sorttable_sortfunction = sorttable["sort_"+override]; 
if (override == "alpha") { 
 
headrow.sorttable_sortfunction = sort_alpha; 
} 
} else { 
headrow.sorttable_sortfunction = guessType(table,i); 
} 
headrow.sorttable_columnindex = i; 
headrow.sorttable_tbody = table.tBodies[0]; 
dean_addEvent(headrow,"click", function(e) { 
 
if (this.className.search(/\bsorttable_sorted\b/) != -1) { 
sorttable.reverse(this.sorttable_tbody); 
this.className = this.className.replace('sorttable_sorted', 
'sorttable_sorted_reverse'); 
this.removeChild(document.getElementById('sorttable_sortfwdind')); 
sortrevind = document.createElement('span'); 
sortrevind.id = "sorttable_sortrevind"; 
sortrevind.innerHTML = ' ↑'; 
this.appendChild(sortrevind); 
return; 
} 
if (this.className.search(/\bsorttable_sorted_reverse\b/) != -1) { 
sorttable.reverse(this.sorttable_tbody); 
this.className = this.className.replace('sorttable_sorted_reverse', 
'sorttable_sorted'); 
this.removeChild(document.getElementById('sorttable_sortrevind')); 
sortfwdind = document.createElement('span'); 
sortfwdind.id = "sorttable_sortfwdind"; 
sortfwdind.innerHTML = ' ↓'; 
this.appendChild(sortfwdind); 
return; 
} 
 
theadrow = this.parentNode; 
forEach(theadrow.childNodes, function(cell) { 
if (cell.nodeType == 1) { // an element 
cell.className = cell.className.replace('sorttable_sorted_reverse',''); 
cell.className = cell.className.replace('sorttable_sorted',''); 
} 
}); 
sortfwdind = document.getElementById('sorttable_sortfwdind'); 
if (sortfwdind) { sortfwdind.parentNode.removeChild(sortfwdind); } 
sortrevind = document.getElementById('sorttable_sortrevind'); 
if (sortrevind) { sortrevind.parentNode.removeChild(sortrevind); } 
 
this.className += ' sorttable_sorted'; 
sortfwdind = document.createElement('span'); 
sortfwdind.id = "sorttable_sortfwdind"; 
sortfwdind.innerHTML = ' ↓'; 
this.appendChild(sortfwdind); 
row_array = []; 
col = this.sorttable_columnindex; 
rows = this.sorttable_tbody.rows; 
for (var j=0; j<rows.length; j++) { 
row_array[row_array.length] = [sorttable.getInnerText(rows[j].cells[col]), rows[j]]; 
} 
row_array.sort(this.sorttable_sortfunction); 
 
tb = this.sorttable_tbody; 
for (var j=0; j<row_array.length; j++) { 
if (j%2 == 0) { 
row_array[j][1].style.background = evenColor; 
} else { 
row_array[j][1].style.background = oddColor; 
} 
tb.appendChild(row_array[j][1]); 
} 
delete row_array; 
}); 
} 
} 
} 
 
function guessType(table, column) { 
// guess the type of a column based on its first non-blank row 
sortfn = sort_alpha; 
for (var i=0; i<table.tBodies[0].rows.length; i++) { 
text = sorttable.getInnerText(table.tBodies[0].rows.cells[column]); 
if (text != '') { 
if (text.match(/^-?[?$?]?[\d,.]+%?$/)) { 
return sorttable.sort_numeric; 
} 
// 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 
firstDatePart = parseInt(possdate[1]); 
secondDatePart = parseInt(possdate[2]); 
if (firstDatePart > 12) { 
// definitely dd/mm 
return sorttable.sort_ddmm; 
} else if (secondDatePart > 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; 
} 
} 
} 
} 
return sortfn; 
} 
 
function getInnerText(node) { 
// gets the text we want to use for sorting for a cell. 
// strips leading and trailing whitespace. 
// 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 <input> fields. 
 
hasInputs = (typeof node.getElementsByTagName == 'function') && 
node.getElementsByTagName('input').length; 
 
if (node.getAttribute("sorttable_customkey") != null) { 
return node.getAttribute("sorttable_customkey"); 
} 
else if (typeof node.textContent != 'undefined' && !hasInputs) { 
return node.textContent.replace(/^\s+|\s+$/g, ''); 
} 
else if (typeof node.innerText != 'undefined' && !hasInputs) { 
return node.innerText.replace(/^\s+|\s+$/g, ''); 
} 
else if (typeof node.text != 'undefined' && !hasInputs) { 
return node.text.replace(/^\s+|\s+$/g, ''); 
} 
else { 
switch (node.nodeType) { 
case 3: 
if (node.nodeName.toLowerCase() == 'input') { 
return node.value.replace(/^\s+|\s+$/g, ''); 
} 
case 4: 
return node.nodeValue.replace(/^\s+|\s+$/g, ''); 
break; 
case 1: 
case 11: 
var innerText = ''; 
for (var i = 0; i < node.childNodes.length; i++) { 
innerText += sorttable.getInnerText(node.childNodes); 
} 
return innerText.replace(/^\s+|\s+$/g, ''); 
break; 
default: 
return ''; 
} 
} 
} 
 
function reverse(tbody) { 
// reverse the rows in a tbody 
newrows = []; 
for (var i=0; i<tbody.rows.length; i++) { 
newrows[newrows.length] = tbody.rows; 
} 
for (var i=newrows.length-1; i>=0; i--) { 
tbody.appendChild(newrows); 
} 
delete newrows; 
} 
 
/* sort functions 
each sort function takes two parameters, a and b 
you are comparing a[0] and b[0] */ 
function sort_numeric(a,B) { 
aa = parseFloat(a[0].replace(/[^0-9.-]/g,'')); 
if (isNaN(aa)) aa = 0; 
bb = parseFloat(b[0].replace(/[^0-9.-]/g,'')); 
if (isNaN(bb)) bb = 0; 
return aa-bb; 
} 
 
function sort_alpha(a,B) { 
if (a[0].toLowerCase()==b[0].toLowerCase()) return 0; 
if (a[0].toLowerCase()<b[0].toLowerCase()) return -1; 
return 1; 
} 
 
function sort_ddmm(a,B) { 
mtch = a[0].match(sorttable.DATE_RE); 
y = mtch[3]; m = mtch[2]; d = mtch[1]; 
if (m.length == 1) m = '0'+m; 
if (d.length == 1) d = '0'+d; 
dt1 = y+m+d; 
mtch = b[0].match(sorttable.DATE_RE); 
y = mtch[3]; m = mtch[2]; d = mtch[1]; 
if (m.length == 1) m = '0'+m; 
if (d.length == 1) d = '0'+d; 
dt2 = y+m+d; 
if (dt1==dt2) return 0; 
if (dt1<dt2) return -1; 
return 1; 
} 
 
function sort_mmdd(a,B) { 
mtch = a[0].match(sorttable.DATE_RE); 
y = mtch[3]; d = mtch[2]; m = mtch[1]; 
if (m.length == 1) m = '0'+m; 
if (d.length == 1) d = '0'+d; 
dt1 = y+m+d; 
mtch = b[0].match(sorttable.DATE_RE); 
y = mtch[3]; d = mtch[2]; m = mtch[1]; 
if (m.length == 1) m = '0'+m; 
if (d.length == 1) d = '0'+d; 
dt2 = y+m+d; 
if (dt1==dt2) return 0; 
if (dt1<dt2) return -1; 
return 1; 
} 
 
function shaker_sort(list, comp_func) { 
// A stable sort function to allow multi-level sorting of data 
// see: <a class='bbc_url' href='http://en.wikipedia.org/wiki/Cocktail_sort'>http://en.wikipedia.org/wiki/Cocktail_sort</a> 
// thanks to Joseph Nahmias 
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, list[i+1]) > 0 ) { 
var q = list; list = 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, list[i-1]) < 0 ) { 
var q = list; list = list[i-1]; list[i-1] = q; 
swap = true; 
} 
} // for 
b++; 
 
} // while(swap) 
} 
 
 
</script> 
 
======================================================================== 
 
 
Thanks in advance 
ub

mwilliams

Can you recreate this with a simple report that I can run from the sample database? That way I can play around with the script to see if I can find the issue? Sorting within BIRT using drill throughs isn't probably what you're wanting to do, but you could avoid this issue by doing it that way.

vsub

<blockquote class='ipsBlockquote' data-author="'mwilliams'" data-cid="69226" data-time="1286809178" data-date="11 October 2010 - 07:59 AM">
Can you recreate this with a simple report that I can run from the sample database? That way I can play around with the script to see if I can find the issue? Sorting within BIRT using drill throughs isn't probably what you're wanting to do, but you could avoid this issue by doing it that way. </blockquote>

vsub

Hi,

i have created a sample report which will use javascript for sorting.the sorting option will work at the server level only, birt viewer it won't work. I am not able to upload .rptdesign file in birt exchange forum. i have copied the xml code wordpad and attached, please copy the same to notepad and save as Sort_sample.rptdesign. regarding usage of drill through option for sorting , we are using this in some of the reports. We have dashboard which will have around 8-10 sections need to provide sorting, due to this we are using javascript.

thanks in advance
vsub

mwilliams

So, do I need to deploy the birt engine and run this through a browser for it to work as you're saying? Nothing happens when I run it from the designer as HTML output.

johnw

Take a look at this example. Its not using a DOM resort of the table, but it re-runs the report with a specifier to tell BIRT where to apply the sort. This will take care of your issues with your counts, and is easier to maintain.

http://digiassn.blogspot.com/2007/05/birt-strong-suit-is-in-realm-of-online.html

John

vsub

Thanks all for your help. 
 
Regards 
vsub 
 
<blockquote class='ipsBlockquote' data-author="'johnw'" data-cid="69280" data-time="1286935888" data-date="12 October 2010 - 07:11 PM">
Take a look at this example. Its not using a DOM resort of the table, but it re-runs the report with a specifier to tell BIRT where to apply the sort. This will take care of your issues with your counts, and is easier to maintain. 
 
<a class='bbc_url' href='http://digiassn.blogspot.com/2007/05/birt-strong-suit-is-in-realm-of-online.html'>http://digiassn.blogspot.com/2007/05/birt-strong-suit-is-in-realm-of-online.html</a> 
 
John </blockquote>