How to trigger Excel export without the default button

jstuardo · October 2019

Hello,

I need to export the table to Excel. I cannot use the default button because my "dom" is completely different. This is:

`dom: "<'row'<'col-sm-12 col-md-4'<\"gridToolbar\">><'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'<\"customSearch\">>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"`

"gridToolbar" element contains a button to trigger the export.

The question is: how can I trigger the method call that is called when the default button is pressed? if button is not there, I cannot use things such as

`tabla.button(0).trigger();`

Thanks
Jaime

kthorngren · October 2019

One option may be to use the direct insertion method for the Excel button and hide the div where you place the button.

Kevin

jstuardo · October 2019

Hello Kevin,

I tried it, but when I added "B" at the beginning of my custom "dom", Excel button does not appear.

This is my new "dom":

`dom: "B<'row'<'col-sm-12 col-md-4'<\"gridToolbar\">><'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'<\"customSearch\">>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",`

By seeing the page source code, this was added at the beginning:

`<div class="dt-buttons btn-group"></div>`

As you see, is empty.

Part of the table definition is:

           `responsive: false,
            rowId: "id",
            order: [7, "desc"],
            scrollX: true,
            buttons: ['excel'],`

Regards
Jaime

kthorngren · October 2019

Adding the B to the dom option is not using the direct insertion method. Direct insertion uses buttons().container(). This is what I had in mind:
http://live.datatables.net/fuwezata/1/edit

Kevin

jstuardo · October 2019

Hi kthorngren,

thanks for the code, but in my case it does not work.

I used your exact code in my site but button is not placed inside the hidden div.

I am wondering why it works in your case if you are not even including the buttons extension javascript.

In my case, I am including dataTables.buttons.js, buttons.bootstrap4.js and buttons.html5.js. If I remove those, browser console shows the error: "Uncaught TypeError: tabla.buttons is not a function". So, it is important to include those js. Why aren't you including them?

If I show the content of tabla.buttons() using JSON.stringify(tabla.buttons()) I get a large object that contains the grid data. If I do the same with tabla.buttons().container(), an empty object is shown.

Any further help, please?

This is my table definition:

     `<div class="table-responsive">
            <div id="hidden-btn"></div>
            <table id="activos" class="table table-striped table-bordered display nowrap" style="width: 100%">
                <thead>
                    <tr>
                        <th rowspan="2" class="text-center align-middle"></th>
                        <th colspan="2" class="text-center">Carga</th>
                        <th rowspan="2" class="text-center align-middle">Localidad</th>
                        <th rowspan="2" class="text-center align-middle">Número de Serie</th>
                        <th rowspan="2" class="text-center align-middle">Tipo</th>
                        <th colspan="5" class="text-center">Workflow</th>
                        <th colspan="3" class="text-center">Aprobación</th>
                        <th colspan="@camposDisponibles.Count" class="text-center">Datos</th>
                    </tr>
                    <tr>
                        <th class="text-center">Fecha</th>
                        <th class="text-center">Usuario</th>
                        <th class="text-center">Estado</th>
                        <th class="text-center">Fecha</th>
                        <th class="text-center">Usuario</th>
                        <th class="text-center">Comentario</th>
                        <th class="text-center">Foto</th>
                        <th class="text-center">Fecha</th>
                        <th class="text-center">Usuario</th>
                        <th class="text-center">Comentario</th>
                        @foreach (var campoDisponible in camposDisponibles)
                        {
                            <th class="text-center">@campoDisponible.CampoNombre</th>
                        }
                    </tr>
                </thead>
            </table>
        </div>`

Regards
Jaime

kthorngren · October 2019

I am wondering why it works in your case if you are not even including the buttons extension javascript.

I asm including the buttons. I used the download builder for the JS and CSS files:

https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/b-print-1.6.1/datatables.min.js"

The b-1.6.1 is buttons. You can click on the link to see what extensions are included.

I used your exact code in my site but button is not placed inside the hidden div.

Don't hide the div and see if the button is placed there. If the button isn't being placed or you are unable to trigger it then we will need to see a test case to help as the problem is specific to your environment. Please post a link to your page or a test case replicating the issue.

Kevin

jstuardo · October 2019

Hello kthorngren,

It seems I am not incliuding some needed JS.

I have modified your example and the same happens.

I have included the JS one by one and used last jquery library. Please see this: http://live.datatables.net/nutecolo/1/edit

Curiousely, in this example,

`<div class="dt-buttons"></div>`

does appear but empty. In my case not even that div appears, but to continue testing, I need to be sure what JS files to include.

Regards
Jaime

kthorngren · October 2019

You are missing the additional jszip.js required for Excel and html5.js for HTML5 buttons. Refer to this doc:
https://datatables.net/download/release#Buttons

Or you can use the Download Builder to generate the proper set of files for your environment.

Kevin

jstuardo · October 2019

It is very curious.... magically Excel button started to appear. But it is unstable.

Sometimes appear, then I refresh the page, and the button does not appear. Strange, isn't it?

Well.... anyway, I want to ask you some more questions.

When the button mysteriously appeared, I could press it and the Excel export was made. Then I opened the Excel and I have found some bad things that I hope they can be solved:

First, is there a way to decide which columns to export? Some columns contain HTML to open a popup, so when exported, those columns look ugly.

Second, only 10 rows where exported. Is there a way to export the full grid, not only the visible page?

And last but not least, is there a way to call some plugin API directly without trying to click programmatically a button that rarely appears?

Regards
Jaime

kthorngren · October 2019

Sometimes appear, then I refresh the page, and the button does not appear. Strange, isn't it?

Yes, it should be consistent. Look for errors in your browser's console.

First, is there a way to decide which columns to export? Some columns contain HTML to open a popup, so when exported, those columns look ugly.

See this example:
https://datatables.net/extensions/buttons/examples/html5/columns.html

Second, only 10 rows where exported. Is there a way to export the full grid, not only the visible page?

Are you using server side processing? If so see this FAQ:
https://datatables.net/faqs/index#buttons

And last but not least, is there a way to call some plugin API directly without trying to click programmatically a button that rarely appears?

I might be over looking it but I don't see any API's for this:
https://datatables.net/reference/api/#buttons

If the Excel button appears intermittently then that would indicate a problem with loading the buttons code which wouldn't be fixed by calling an direct API to export the data. You should find the problem of why the button intermittently is loaded. however if you are using server side processing then you may want to use a server based solution.

Kevin

colin · October 2019

I might be over looking it but I don't see any API's for this: https://datatables.net/reference/api/#buttons

You can call the action method, as in this example here.

C

How to trigger Excel export without the default button

How to trigger Excel export without the default button

Answers

Howdy, Stranger!

Categories

DataTables

How to trigger Excel export without the default button

How to trigger Excel export without the default button

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables