简体   繁体   English

在BIRT报告中使用标头在客户端对数据进行排序(使用JavaScript)

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM