How to export Bootsfaces datatable to Excel

Question

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>

Stephan Rauh Stephan Rauh · Accepted Answer · 2016-11-08T14:29:34

Currently, there's no export function in b:dataTable. This includes both the current version 0.9.1 and the upcoming version 1.0.

However, you should be able to add such a functionality yourself. Your second approach looks promising. b:dataTable is based on the datatable hosted at Datatables.net. This widget, in turn, has an extension adding CSV, PDF and Excel exports. Currently, we don't include this extension with BootsFaces, so you have to add the corresponding JavaScript file yourself. Here's the description of the API of the exporter of DataTables.net: https://datatables.net/extensions/buttons/examples/initialisation/export.html.

How to export Bootsfaces datatable to Excel

1. First approach: Primefaces dataExporter

2. Second approach: DataTables.net customOptions

2 Answers