Documentation v8.0.36

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
15 Apr 2022, 6:43 am 31 41 $1359.00
Melody Macy melody@altbox.com
Active
10 Mar 2022, 6:43 am 83 96 $2880.00
Max Smith max@kt.com
Active
25 Oct 2022, 6:05 pm 31 36 $1859.00
Sean Bean sean@dellito.com
Active
24 Jun 2022, 8:43 pm 68 79 $3202.00
Brian Cox brian@exchange.com
Active
24 Jun 2022, 10:30 am 86 94 $1642.00
Mikaela Collins mik@pex.com
Active
15 Apr 2022, 10:30 am 89 100 $4801.00
Francis Mitcham f.mit@kpmg.com
Active
25 Oct 2022, 10:10 pm 35 42 $4735.00
Olivia Wild olivia@corpmail.com
Active
10 Mar 2022, 5:30 pm 9 21 $1171.00
Neil Owen owen.neil@gmail.com
Active
10 Nov 2022, 6:05 pm 16 27 $450.00
Dan Wilson dam@consilting.com
Active
25 Oct 2022, 5:30 pm 37 45 $159.00
Emma Bold emma@intenso.com
Active
20 Dec 2022, 6:05 pm 98 106 $3940.00
Ana Crown ana.cf@limtel.com
Active
15 Apr 2022, 2:40 pm 77 89 $3747.00
Robert Doe robert@benko.com
Active
22 Sep 2022, 5:20 pm 11 25 $2287.00
John Miller miller@mapple.com
Active
21 Feb 2022, 6:43 am 92 98 $4898.00
Lucy Kunic lucy.m@fentech.com
Active
20 Jun 2022, 10:10 pm 86 96 $4197.00
Ethan Wilder ethan@loop.com.au
Active
25 Oct 2022, 6:43 am 59 73 $2313.00
Lucy Kunic lucy.m@fentech.com
Active
20 Jun 2022, 10:10 pm 29 40 $4329.00
Emma Smith smith@kpmg.com
Active
24 Jun 2022, 10:30 am 61 69 $3829.00
Melody Macy melody@altbox.com
Active
25 Oct 2022, 5:20 pm 97 111 $1217.00
Max Smith max@kt.com
Active
05 May 2022, 11:30 am 84 91 $4412.00
Sean Bean sean@dellito.com
Active
20 Jun 2022, 5:20 pm 68 83 $3046.00
Brian Cox brian@exchange.com
Active
24 Jun 2022, 6:05 pm 6 16 $4066.00
Mikaela Collins mik@pex.com
Active
25 Jul 2022, 10:30 am 87 96 $1674.00
Francis Mitcham f.mit@kpmg.com
Active
05 May 2022, 2:40 pm 61 69 $4921.00
Olivia Wild olivia@corpmail.com
Active
19 Aug 2022, 9:23 pm 4 16 $195.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
$ 939
Custom License
Reach us for custom license offers.
Buy Now
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