CODEWITHSUNDEEP
javascriptsortingbirt
Dhoha
Dhoha

Reputation: 369

Use header in BIRT report to sort data at the client side (with JavaScript)

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.

I found this trick 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.

Please, any hints?

Upvotes: 1

Views: 1661

Answers (1)

Dominique
Dominique

Reputation: 4342

Usually i embed Datatables for this. It is simple, powerful and it has a good documentation.

You can visit a live demo of a BIRT table with Datatable here. As you can see, all drillthrough hyperlink actions and styles are kept intact.

Basically we need to add a HTML text at the end of the report, set the type to "HTML" and load jquery and datatable in a script tag using "head.js". For instance:

<script>

head.load("//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css","//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js",function(){
    console.log("DataTables framework loaded...");
    $("#myTableID").DataTable();  //"myTableID" should be the bookmark of the table
    console.log("Interactive table is ready!"); 
});

</script>

enter image description here

Use BIRT bookmark property to set an ID to the table. Please notice if your BIRT emitter does not generate a "thead" tag inside the HTML table (just inspect the html output to see if a thead tag is generated or not), you need to fix it by script: move the first row under "tbody" into a "thead" tag using jquery, before invoking "DataTable()" function. Indeed it requires a little bit of javascript knowledge but as you see that will be well worth it!

Upvotes: 1

Related Questions