# Documentation v8.0.38

Preview Downloads Purchase

# Buttons

Buttons extension for DataTables provides a framework with common options and API that can be used with DataTables, but is also very extensible, recognising that you will likely want to use buttons which perform an action unique to your applications.

Customer Name | Email | Status | Date Joined | No. Orders | No. Products | Total
--- | --- | --- | --- | --- | --- | ---
Emma Smith | smith@kpmg.com | Active | 10 Mar 2022, 9:23 pm | 92 | 98 | $1092.00
Melody Macy | melody@altbox.com | Active | 05 May 2022, 6:05 pm | 74 | 81 | $4997.00
Max Smith | max@kt.com | Active | 25 Oct 2022, 10:30 am | 62 | 67 | $5043.00
Sean Bean | sean@dellito.com | Active | 19 Aug 2022, 2:40 pm | 69 | 83 | $4888.00
Brian Cox | brian@exchange.com | Active | 19 Aug 2022, 5:30 pm | 23 | 29 | $3729.00
Mikaela Collins | mik@pex.com | Active | 25 Oct 2022, 10:10 pm | 95 | 108 | $3079.00
Francis Mitcham | f.mit@kpmg.com | Active | 21 Feb 2022, 6:05 pm | 44 | 56 | $4396.00
Olivia Wild | olivia@corpmail.com | Active | 10 Mar 2022, 10:10 pm | 21 | 28 | $3831.00
Neil Owen | owen.neil@gmail.com | Active | 25 Oct 2022, 8:43 pm | 57 | 64 | $2991.00
Dan Wilson | dam@consilting.com | Active | 15 Apr 2022, 6:05 pm | 27 | 34 | $2217.00
Emma Bold | emma@intenso.com | Active | 10 Nov 2022, 10:30 am | 35 | 41 | $3372.00
Ana Crown | ana.cf@limtel.com | Active | 25 Jul 2022, 9:23 pm | 38 | 46 | $4559.00
Robert Doe | robert@benko.com | Active | 05 May 2022, 8:43 pm | 11 | 26 | $3203.00
John Miller | miller@mapple.com | Active | 15 Apr 2022, 2:40 pm | 21 | 31 | $605.00
Lucy Kunic | lucy.m@fentech.com | Active | 20 Jun 2022, 6:43 am | 12 | 26 | $362.00
Ethan Wilder | ethan@loop.com.au | Active | 25 Oct 2022, 10:30 am | 34 | 43 | $4313.00
Mikaela Collins | mik@pex.com | Active | 10 Mar 2022, 11:05 am | 3 | 10 | $2891.00
Emma Smith | smith@kpmg.com | Active | 05 May 2022, 2:40 pm | 67 | 77 | $4971.00
Melody Macy | melody@altbox.com | Active | 10 Nov 2022, 11:30 am | 82 | 95 | $1172.00
Max Smith | max@kt.com | Active | 15 Apr 2022, 9:23 pm | 38 | 53 | $2489.00
Sean Bean | sean@dellito.com | Active | 21 Feb 2022, 5:20 pm | 93 | 100 | $1804.00
Brian Cox | brian@exchange.com | Active | 22 Sep 2022, 6:05 pm | 15 | 27 | $3394.00
Mikaela Collins | mik@pex.com | Active | 25 Jul 2022, 11:30 am | 38 | 47 | $814.00
Francis Mitcham | f.mit@kpmg.com | Active | 21 Feb 2022, 11:30 am | 43 | 57 | $2392.00
Olivia Wild | olivia@corpmail.com | Active | 15 Apr 2022, 11:30 am | 42 | 56 | $3515.00

    <div class="card card-p-0 card-flush">
     <div class="card-header align-items-center py-5 gap-2 gap-md-5">
      <div class="card-title">
       <!--begin::Search-->
       <div class="d-flex align-items-center position-relative my-1">
        <span class="svg-icon svg-icon-1 position-absolute ms-4">...</span>
        <input type="text" data-kt-filter="search" class="form-control form-control-solid w-250px ps-14" placeholder="Search Report" />
       </div>
       <!--end::Search-->
       <!--begin::Export buttons-->
       <div id="kt_datatable_example_1_export" class="d-none"></div>
       <!--end::Export buttons-->
      </div>
      <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
       <!--begin::Export dropdown-->
       <button type="button" class="btn btn-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
       <span class="svg-icon svg-icon-1 position-absolute ms-4">...</span>
       Export Report
       </button>
       <!--begin::Menu-->
       <div id="kt_datatable_example_1_export_menu" class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-200px py-4" data-kt-menu="true">
        <!--begin::Menu item-->
        <div class="menu-item px-3">
         <a href="#" class="menu-link px-3" data-kt-export="copy">
         Copy to clipboard
         </a>
        </div>
        <!--end::Menu item-->
        <!--begin::Menu item-->
        <div class="menu-item px-3">
         <a href="#" class="menu-link px-3" data-kt-export="excel">
         Export as Excel
         </a>
        </div>
        <!--end::Menu item-->
        <!--begin::Menu item-->
        <div class="menu-item px-3">
         <a href="#" class="menu-link px-3" data-kt-export="csv">
         Export as CSV
         </a>
        </div>
        <!--end::Menu item-->
        <!--begin::Menu item-->
        <div class="menu-item px-3">
         <a href="#" class="menu-link px-3" data-kt-export="pdf">
         Export as PDF
         </a>
        </div>
        <!--end::Menu item-->
       </div>
       <!--end::Menu-->
       <!--end::Export dropdown-->
      </div>
     </div>
     <div class="card-body">
      <table class="table align-middle border rounded table-row-dashed fs-6 g-5" id="kt_datatable_example_1">
       <thead>
        <!--begin::Table row-->
        <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase">
         <th class="min-w-100px">Customer Name</th>
         <th class="min-w-100px">Email</th>
         <th class="min-w-100px">Status</th>
         <th class="min-w-100px">Date Joined</th>
         <th class="text-end min-w-75px">No. Orders</th>
         <th class="text-end min-w-75px">No. Products</th>
         <th class="text-end min-w-100px pe-5">Total</th>
        </tr>
        <!--end::Table row-->
       </thead>
       <tbody class="fw-bold text-gray-600">
        <tr class="odd">
         <td>
          <a href="#" class="text-dark text-hover-primary">Emma Smith</a>
         </td>
         <td>
          <a href="#" class="text-dark text-hover-primary">e.smith@kpmg.com.au</a>
         </td>
         <td>
          <div class="badge badge-light-success">Active</div>
         </td>
         <td data-order="2022-03-10T14:40:00+05:00">10 Mar 2022, 2:40 pm</td>
         <td class="text-end pe-0">94</td>
         <td class="text-end pe-0">103</td>
         <td class="text-end">$500.00</td>
        </tr>
       </tbody>
      </table>
     </div>
    </div>

    "use strict";

    // Class definition
    var KTDatatablesButtons = function () {
        // Shared variables
        var table;
        var datatable;

        // Private functions
        var initDatatable = function () {
            // Set date data order
            const tableRows = table.querySelectorAll('tbody tr');

            tableRows.forEach(row => {
                const dateRow = row.querySelectorAll('td');
                const realDate = moment(dateRow[3].innerHTML, "DD MMM YYYY, LT").format(); // select date from 4th column in table
                dateRow[3].setAttribute('data-order', realDate);
            });

            // Init datatable --- more info on datatables: https://datatables.net/manual/
            datatable = $(table).DataTable({
                "info": false,
                'order': [],
                'pageLength': 10,
            });
        }

        // Hook export buttons
        var exportButtons = () => {
            const documentTitle = 'Customer Orders Report';
            var buttons = new $.fn.dataTable.Buttons(table, {
                buttons: [
                    {
                        extend: 'copyHtml5',
                        title: documentTitle
                    },
                    {
                        extend: 'excelHtml5',
                        title: documentTitle
                    },
                    {
                        extend: 'csvHtml5',
                        title: documentTitle
                    },
                    {
                        extend: 'pdfHtml5',
                        title: documentTitle
                    }
                ]
            }).container().appendTo($('#kt_datatable_example_1_export'));

            // Hook dropdown menu click event to datatable export buttons
            const exportButtons = document.querySelectorAll('#kt_datatable_example_1_export_menu [data-kt-export]');
            exportButtons.forEach(exportButton => {
                exportButton.addEventListener('click', e => {
                    e.preventDefault();

                    // Get clicked export value
                    const exportValue = e.target.getAttribute('data-kt-export');
                    const target = document.querySelector('.dt-buttons .buttons-' + exportValue);

                    // Trigger click event on hidden datatable export buttons
                    target.click();
                });
            });
        }

        // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
        var handleSearchDatatable = () => {
            const filterSearch = document.querySelector('[data-kt-filter="search"]');
            filterSearch.addEventListener('keyup', function (e) {
                datatable.search(e.target.value).draw();
            });
        }

        // Public methods
        return {
            init: function () {
                table = document.querySelector('#kt_datatable_example_1');

                if ( !table ) {
                    return;
                }

                initDatatable();
                exportButtons();
                handleSearchDatatable();
            }
        };
    }();

    // On document ready
    KTUtil.onDOMContentLoaded(function () {
        KTDatatablesButtons.init();
    });

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now