CSV without Button is possible?

luloxyn

Hello, I want to add a CSV export option to my dataTable but I don't want to create in-built dataTable button. Instead, I want to use one of my buttons.

How can I export a .csv file when a page button is pressed?

I've checked the documentation and all the examples are pointing to the in-built buttons.

Example: http://jsfiddle.net/joupqyas/

Thanks.

kthorngren

You can use button().trigger() to programmatically execute a button. I think I remember reading that you have to place the export button on the page to use button().trigger() but you can hide the button.

Kevin

luloxyn

Hello, @kthorngren thank you for your answer.

I've tried to hide the element but no lucky, I've created the scenario of my case:
http://jsfiddle.net/546uoskn/

In the top, we have the in-built dataTable button and on the bottom my custom button.

Any idea how to proceed?
Regards.

kthorngren

How about this:
http://jsfiddle.net/dpnw9aro/

Also added the button().trigger().

Kevin

luloxyn

Thank you @kthorngren for the help, that worked perfectly.

Now wondering how to remove a column from the export that is not visible in my dataTable?

I'm using:
"columnDefs": [
{ "visible": visible, "targets": 0 }
]

To hide the first column.

kthorngren

This example should help:
https://datatables.net/extensions/buttons/examples/html5/columns.html

Kevin

luloxyn

Hello @kthorngren , since I'm using this I've noticed my length-dropdown has disappeared:

Example:
http://jsfiddle.net/to7n3d4u/

Any ideas?
Thanks!!

kthorngren

Checkout this FAQ:
https://datatables.net/faqs/index#buttons-page-length

Kevin

luloxyn

Hello @kthorngren yes, I managed to add a button, but it doesn't look very good to me.

Updated example: http://jsfiddle.net/83L6jdfp/

The button looks a bit weird for me:

(Button is not on the same line as the search bar, and it doesn't open the pop-up like the example)

luloxyn

Hello again @kthorngren, managed to fix it.
Seems I was missing to load:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">

Now is fixed but is possible to remove this black-screen cover when pressing the button?

luloxyn

My 2 last question:
1- Why there's a space between the page buttons and the result line?

How I can remove this space?

2- How I can adjust space bottom space when there are empty rows:

http://jsfiddle.net/w25yjmrh/

Thanks.

allan

1) Its because you've used dom: 'Bfrtip',. That overrules the Bootstrap 4 default to arrange the features around the table into columns. See the Bootstrap 4 example for how to do that.

2) Add scrollCollapse to your initialisation. See the vertical scroll example.

Allan