How to add second CSV export button to DataTable?

Question

I have configured the CSV button to work correctly. Now, my client would like a second CSV button to be added to the bottom of the table, as well, so that if someone scrolls to the bottom they don't have to go to the top of table to export.

opentable = $("#open").dataTable( {
    dom: "Bfrtip",
    "data": openData,
    "columns": [{
        data: "severity", render: function (data, type, row) {
            if (type === 'export') {                            
                return data;                        
            } else {                            
                return '';                         
        }          
    }],         
    "paging": true,         
    "searching": true,         
    buttons : [{             
        extend: 'csv',             
        exportOptions: {                 
            columns: [0,1,2,3,4,5,6,7,8,9,10], orthogonal: 'export'             
        }          
    }]        
});

If that's unclear, I'd like to go from the first picture to the second:

sumowrestler · Accepted Answer · 2017-06-29 21:20:58Z

1

I played with datatables for hours until I happened upon the dom page and realized that I could add a second B.

My dom is now BfrtBip and this adds a second button before the information (under the table). You can add a second (third, fourth etc...) of anything using this method.

answered Jun 29, 2017 at 21:20

sumowrestler

3655 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dylan · Accepted Answer · 2017-06-28 21:47:30Z

0

Perhaps you could clone the class the contains the buttons then prepend it somewhere near the bottom

$(".dt-buttons").clone(true).prependTo(".dataTables_info");

Here is a live example: http://live.datatables.net/tehopova/1/edit

edited Jun 28, 2017 at 21:47

answered Jun 28, 2017 at 21:34

Dylan

1652 silver badges16 bronze badges

5 Comments

sumowrestler Over a year ago

I am following your code exactly, but nothing happens. I tried changing the class selector to other values and still could not achieve any cloning.

Dylan Over a year ago

In the browser console, are you able to find elements when you do something like $(".dt-buttons") ... (or whatever class surrounds the buttons)? Test if you can manipulate the element by doing something like $(".dt-buttons").hide(); If nothing happens inspect the element carefully to see which selector is correct

sumowrestler Over a year ago

The document cannot find the button using the classes. In the $(document).ready(function() {...}) I checked for existence of the button (using .length) and it could not find it. Then, I tried putting the clone in $(window).load(function() {...}) and it only sometimes would find the button and add it the bottom correctly. Other times, it would not find it at all.

Dylan Over a year ago

You code to clone the buttons should be immediately after the table is created because that is when the classes exist.

sumowrestler Over a year ago

I tried this but it still wasn't working. When switching prependTo(...) to insertBefore(...) it worked more consistently. Thanks for your help!

Collectives™ on Stack Overflow

How to add second CSV export button to DataTable?

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related