Discussions
Categories
Groups
Community Home
Categories
INTERNAL ENABLEMENT
POPULAR
PUBLIC CLOUD
PRIVATE CLOUD
Quick Links
MY LINKS
HELPFUL TIPS
Back to website
Home
Intelligence (Analytics)
Use header in BIRT report to sort data at the client side (with JavaScript)
a_hanwate
<p>I want to add to the BIRT table and crosstab controls the following functionality: when I click on the header of a specific column, the data get sorted according to this column in the ascending or descending order.</p>
<p> </p>
<p>I found <a data-ipb='nomediaparse' href='
http://developer.actuate.com/community/forum/index.php?/files/file/1021-dynamic-column-sorting/'>http://developer.actuate.com/community/forum/index.php?/files/file/1021-dynamic-column-sorting/</a>
; that uses parameters to sort the data on the server side, but I don't want to work the sorting on the server side. However, I want to do it in the client side preferably with JavaScript.</p>
<p> </p>
<p> </p>
Find more posts tagged with
Comments
jfranken
<p>In BIRT Professional there is an Interactive Viewer component that provides this functionality along with filtering and more. In the Open Source version I believe you need to code it yourself. I don't know of an example that implements the sorting on the client in JavaScript. One method for doing that would be to select each of the detail fields in the table and go to "Bookmark" on the Properties tab. Add a bookmark for each field. When the report is rendered, this creates an "id" attribute in the <div> tag that contains the data and makes it easy to reference the column data in code. Also, replace the column header Label elements with Text elements set to type HTML. Then put JavaScript or jQuery code in the Text element to perform the sorting. I haven't written code to do this, but it would involve putting the data in an array, sorting it, and replacing the values on the page with the sorted data. You'll need to sort all of the columns based on the sorting of the key column. </p>
<p> </p>
<p>I hope this helps,</p>
<p>Jeff</p>