How to create one export button in datatables

How to create one export button in datatables

newbieguynewbieguy Posts: 1Questions: 1Answers: 0

I was planning to a create dropdown list for export types in datatables. However I want to create an export button when the user selected their preferred type of export (ie: print export). As of now its working with the dropdown when the user select it automatically generate an export.

But I want to select first the user which one and then they click export button. I think the current one sometimes mistakes so i think added a measures to click first a button will reduce that mistakes.

This is how it looks like.

<div class="dataTables_filter">
                                <div class="export">
                                <label>Print/Export to</label>
                                <form method="post">
                            <select class="form-control" id="export">
                                <option></option>
                                <option id="print">Print</option>
                                <option id="csv">CSV</option>
                                <option id="excel">XLS</option>                                       
                                <option id="pdf">PDF</option>
                            </select>
                             <input id="submit" type="submit" name="submit" value="Submit">
                           </form>
                                 </div>

                            </div>

I dont know why its not working even I called the id of export button (#submit_export)

         order: [[0, 'DESC']], 
                dom: 'Blfrtip',
                buttons: [
                    'print',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5'
                ],
                  initComplete: function() {
             var $buttons = $('.dt-buttons').hide();
             $('#export').on('change', function() {
                var btnClass = $(this).find(":selected")[0].id 
                   ? '.buttons-' + $(this).find(":selected")[0].id 
                   : null;
                if (btnClass) $buttons.find(btnClass).click(); 
             })
           },

I want the user select first their preferred option and then once they decide they will click the export button to download the file.

This discussion has been closed.