[英]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. 我想添加到BIRT表中,交叉表控制以下功能:当我单击特定列的标题时,数据将按照此列的升序或降序进行排序。
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.
但是,我想最好在客户端使用JavaScript。
Please, any hints? 拜托,有什么提示吗?
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 . 您可以在此处通过Datatable访问BIRT表的现场演示。 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". 基本上,我们需要在报告末尾添加HTML文本,将类型设置为“ HTML”,然后使用“ head.js”将jquery和datatable加载到脚本标签中。 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>
Use BIRT bookmark property to set an ID to the table. 使用BIRT书签属性为表设置ID。 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.
请注意,如果您的BIRT发射器没有在HTML表格内生成“ thead”标记(只需检查html输出以查看是否生成thead标记),则需要通过脚本对其进行修复:将第一行移至“在调用“ DataTable()”函数之前,使用jquery将“ tbody”插入“ thead”标签。 Indeed it requires a little bit of javascript knowledge but as you see that will be well worth it!
确实,它需要一点点JavaScript知识,但是如您所见,这是非常值得的!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.