Add the export button in html - static

neerajsonar

I want to add the export to excel or pdf buttons in the html rather than it getting generated from the js.
Eg code below:
now the script generates the buttons in the bottom of the table i want to write the buttons in the html

my js :

$(document).ready(function() {
    $('#aa').DataTable( {
        dom: 'frtipB',
        buttons: [
            'excelHtml5' 
         ]
    } );
    
} );

my html :

<div>
<table id="aa" cellspacing="0" width="100%">
      <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

<tbody>
    <tr>
            <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
    </tr>
</tbody>
</table>
</div>

Like I want to be able to write

<div class="dt-buttons"><a class="dt-button buttons-excel buttons-html5" tabindex="0" aria-controls="aa">
<span>Excel</span>
</a>
</div> 

directly into the html, it only shows the button but doesn't work.

jLinux

Your best bet would be to use the buttons() api. I wanted to use a lot of the buttons (colvis, copy, select, print, etc etc), but I wanted them to show up in a div that would slide out from the left of the screen.

Screenshots: http://d.pr/i/EnPN & http://d.pr/i/PrTJ

They're all DataTables buttons, and I used the button() api. Heres my code, Ill leave as much of it in there as I can so you can get an idea of how to use it..

var $dt = $('#data-table' ).DataTable();

// Name of the filename when exported (except for extension)
var export_filename = 'Assets-' + tools.date( '%d-%M-%Y' );

// Configure Export Buttons
new $.fn.dataTable.Buttons( $dt, {
    buttons: [
        {
            text: '<i class="fa fa-lg fa-clipboard"></i>',
            extend: 'copy',
            className: 'btn btn-xs btn-primary p-5 m-0 width-35 assets-export-btn export-copy ttip',
            exportOptions: {
                columns: function ( idx, data, node ) {
                    return idx === 4 || $dt.column( idx ).visible();
                }
            }
        }, {
            text: '<i class="fa fa-lg fa-file-text-o"></i>',
            extend: 'csv',
            className: 'btn btn-xs btn-primary p-5 m-0 width-35 assets-export-btn export-csv ttip',
            title: export_filename,
            extension: '.csv',
            exportOptions: {
                columns: function ( idx, data, node ) {
                    return idx === 4 || $dt.column( idx ).visible();
                }
            }
        }, {
            text: '<i class="fa fa-lg fa-file-excel-o"></i>',
            extend: 'excel',
            className: 'btn btn-xs btn-primary p-5 m-0 width-35 assets-export-btn export-xls ttip',
            title: export_filename,
            extension: '.xls',
            exportOptions: {
                columns: function ( idx, data, node ) {
                    return idx === 4 || $dt.column( idx ).visible();
                }
            }
        }, {
            text: '<i class="fa fa-lg fa-file-pdf-o"></i>',
            extend: 'pdf',
            className: 'btn btn-xs btn-primary p-5 m-0 width-35 assets-export-btn export-pdf ttip',
            title: export_filename,
            extension: '.pdf',
            exportOptions: {
                columns: function ( idx, data, node ) {
                    return idx === 4 || $dt.column( idx ).visible();
                }
            }
        }
    ]
} );

// Add the Export buttons to the toolbox
$dt.buttons( 0, null ).container().appendTo( '#export-assets' );


// Configure Print Button
new $.fn.dataTable.Buttons( $dt, {
    buttons: [
        {
            text: '<i class="fa fa-lg fa-print"></i> Print Assets',
            //message: 'TEST!!',
            customize: function ( win ) {
                $( win.document.body )
                    .css( 'font-size', '15px' )
                    .prepend( $( '<img />' )
                        .attr('src','https://url/wp-content/uploads/2015/08/logo-300x87.png')
                        .css({
                            position : 'absolute',
                            bottom   : '0',
                            right    : '0',
                            opacity  : '0.4',
                            filter   : 'alpha(opacity=40)'
                        })
                );

                $( win.document.body )
                    .find( 'table' )
                    .addClass( 'compact' )
                    .css( css );
            },
            extend: 'print',
            //className: 'btn btn-xs btn-primary p-5 m-0 width-120 assets-export-btn export-print'
            className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn export-print',
            exportOptions: {
                columns: function ( idx, data, node ) {
                    return idx === 4 || $dt.column( idx ).visible();
                }
            }
        }
    ]
} );

// Add the Print button to the toolbox
$dt.buttons( 1, null ).container().appendTo( '#print-assets' );


// Select Buttons
new $.fn.dataTable.Buttons( $dt, {
    buttons: [
        {
            extend: 'selectAll',
            className: 'btn btn-xs btn-primary p-5 m-0 width-70 assets-select-btn'
        }, {
            extend: 'selectNone',
            className: 'btn btn-xs btn-primary p-5 m-0 width-70 assets-select-btn'
        }
    ]
} );

// Add the Select buttons to the toolbox
$dt.buttons( 2, null ).container().appendTo( '#select-assets' );


// Configure Selected Assets Buttons (delete, timeline, etc)
new $.fn.dataTable.Buttons( $dt, {
    buttons: [
        {
            text: 'Delete Selected',
            action: function () {
                assets.delete_from_list($dt, assets.get_selected_ids($dt) );
            },
            className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn toolbox-delete-selected'
        }, {
            text: 'View Timeline',
            action: function () {
                console.log( assets.get_selected_ids($dt) );
            },
            className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn'
        }
    ]
} );

// Add the selected assets buttons to the toolbox
$dt.buttons( 3, null ).container().appendTo( '#selected-assets-btn-group' );


// Configure Select Columns
new $.fn.dataTable.Buttons( $dt, {
    buttons: [
        {
            extend: 'collection',
            text: 'Select Columns',
            buttons: [ {
                extend: 'columnsToggle',
                columns: ':not([data-visible="false"])'
            } ],
            className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn'
        }
    ],
    fade: true
} );

// Add the select columns button to the toolbox
$dt.buttons( 4, null ).container().appendTo( '#toolbox-column-visibility' );