I would like to export the data from my datatable to Excel.
I am using a BootsFaces datatable (http://showcase.bootsfaces.net/forms/DataTable.jsf ), which looks as follows (I stripped it down for brevity):
<b:dataTable
id="dossiers"
value="#{bean.dossiers}"
var="dossier">
<b:dataTableColumn
label="#{text['dossier.id']}"
value="#{dossier.id}" />
<b:dataTableColumn
label="#{text['dossier.version']}"
value="#{dossier.version}" />
</b:dataTable>
I have tried two approaches:
1. First approach: Primefaces dataExporter
http://www.primefaces.org/showcase/ui/data/dataexporter/basic.xhtml
<h:commandLink id="excel">
<p:graphicImage name="img/excel.png" />
<p:dataExporter
type="xls"
target="identities"
fileName="dossiers" />
</h:commandLink>
I have added all the necessary dependencies (org.apache.poi). This works if I use a PrimeFaces datatable, but I do not like the look and want to use BootsFaces instead. When I try it, I get the following exception:
javax.servlet.ServletException: Unsupported datasource target:"net.bootsfaces.component.dataTable.DataTable", exporter must target a PrimeFaces DataTable
2. Second approach: DataTables.net customOptions
The BootsFaces data table is based on the jQuery plugin DataTables.net. The BootsFaces data table does not implement ALL of the jQuery options, HOWEVER, you can add these manually using the customOptions attribute.
You can pass custom-options to [...] the dataTable and to each column. These options are added to the Json object used to initialize the datatable.
DataTables.net has the following file export options:
https://datatables.net/extensions/buttons/examples/initialisation/export.html
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
So now I have tried adding this data export option in my datatable as follows:
<b:dataTable
id="dossiers"
value="#{bean.dossiers}"
var="dossier"
customOptions="dom: 'Bfrtip', buttons: ['excel']"> // **ADDED HERE**
<b:dataTableColumn
label="#{text['dossier.id']}"
value="#{dossier.id}" />
<b:dataTableColumn
label="#{text['dossier.version']}"
value="#{dossier.version}" />
</b:dataTable>
Unfortunately, this also does not work. My datatable still displays, but literally ALL the options have now disappeared (no more paging, no more search bar, etc).
I have tried it both with and without the additional datatables BUTTONS dependency.
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>datatables.net-buttons</artifactId>
<version>1.2.2</version>
</dependency>
Does anyone have any advice on how to export my data from a BootsFaces datatable?
I offer eternal gratitude in return!
EDIT: SOLUTION
I have used a standard datatable and added the functionality myself, as was suggested by Stephan Rauh (from Bootsfaces).
IMPORTANT: in order to make this work, use the class as selector, NOT the id!!
<h:dataTable
value="#{bean.dossiers}"
var="dossier"
styleClass="dossiers"> <!--class is used as selector-->
<h:column>
<f:facet name="header">
<h:outputText value="#{text['dossier.id']}" />
</f:facet>
<h:outputText value="#{dossier.id}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="#{text['dossier.version']}" />
</f:facet>
<h:outputText value="#{dossier.version}" />
</h:column>
<h:dataTable>
And in the head of my document:
<!-- Add all the required script sources, see: https://datatables.net/extensions/buttons/examples/initialisation/export.html -->
<script type="text/javascript">
$(document).ready(function() {
$('.dossiers').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf'
]
} );
} );
</script>