function reportToColumns ( tabSelector, numCols ) { var numRows = 0; var curtable = null; // calculate the number of rows per column var table = $(tabSelector).addClass('reportColumn'); var rowsPerCol = Math.ceil( ( $(table).find(' tr').length-1 )/numCols); var baseName = 'reportColumn'; // create table template for columns var template = $(table).clone(); $(template).find('tr').has('td').remove(); for ( i = 2; i <= numCols; i++) { curtable = $(template).clone().attr('id',baseName+i).appendTo( $(table).parent() ); rows = $(table).find('tr').has('td').slice( rowsPerCol, 2*rowsPerCol).detach(); $(curtable).find('tbody').append(rows); } }
The parameter tabSelector should contain the JQuery selector of the table containing the report.
For Universal Theme this is:
'#report_report static id table.t-Report-report'
in which the report static id should be replaced by the static ID defined for your report region. Actually this code can be used for any HTML table. You can find the table selector using FireBug or Chrome Inspector.
I personally like to work with Firebug because of its multiline code pane. It is very easy to test JQuery selectors because the code pane remains unaltered while you can see and scroll the console output. I also use this to develop and test my JavaScript.
Add the class below to your CSS definitions. It makes sure that the columns are displayed next to each other with a distance of 30 px between them.
.reportColumn { display: block; float: left; margin-right: 30px; position: relative; }
You can see it in action here.
Happy Apexing
1 comment:
Post a Comment