DataTables - Export

DataTables Export

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, 6:43 am	94	103	$2272.00
Melody Macy	melody@altbox.com	Active	25 Oct 2022, 6:43 am	59	72	$1329.00
Max Smith	max@kt.com	Active	10 Nov 2022, 6:05 pm	84	93	$3859.00
Sean Bean	sean@dellito.com	Active	10 Mar 2022, 5:30 pm	43	52	$4161.00
Brian Cox	brian@exchange.com	Active	25 Oct 2022, 5:30 pm	91	101	$4179.00
Mikaela Collins	mik@pex.com	Active	10 Nov 2022, 6:43 am	14	23	$2326.00
Francis Mitcham	f.mit@kpmg.com	Active	10 Mar 2022, 11:30 am	5	10	$1914.00
Olivia Wild	olivia@corpmail.com	Active	05 May 2022, 10:30 am	18	31	$791.00
Neil Owen	owen.neil@gmail.com	Active	25 Jul 2022, 10:10 pm	54	66	$833.00
Dan Wilson	dam@consilting.com	Active	25 Jul 2022, 9:23 pm	71	80	$628.00
Emma Bold	emma@intenso.com	Active	19 Aug 2022, 11:30 am	33	42	$530.00
Ana Crown	ana.cf@limtel.com	Active	22 Sep 2022, 6:05 pm	62	74	$2362.00
Robert Doe	robert@benko.com	Active	21 Feb 2022, 6:43 am	3	12	$2479.00
John Miller	miller@mapple.com	Active	19 Aug 2022, 10:30 am	38	50	$107.00
Lucy Kunic	lucy.m@fentech.com	Active	15 Apr 2022, 2:40 pm	26	31	$3753.00
Ethan Wilder	ethan@loop.com.au	Active	20 Jun 2022, 6:05 pm	42	56	$3594.00
Emma Smith	smith@kpmg.com	Active	10 Nov 2022, 11:05 am	65	73	$2593.00
Emma Smith	smith@kpmg.com	Active	10 Nov 2022, 5:20 pm	10	18	$2088.00
Melody Macy	melody@altbox.com	Active	20 Dec 2022, 9:23 pm	82	87	$2152.00
Max Smith	max@kt.com	Active	15 Apr 2022, 6:05 pm	89	103	$4928.00
Sean Bean	sean@dellito.com	Active	10 Mar 2022, 10:10 pm	66	75	$2637.00
Brian Cox	brian@exchange.com	Active	05 May 2022, 6:05 pm	7	15	$1370.00
Mikaela Collins	mik@pex.com	Active	21 Feb 2022, 2:40 pm	63	78	$1422.00
Francis Mitcham	f.mit@kpmg.com	Active	24 Jun 2022, 11:05 am	62	73	$788.00
Olivia Wild	olivia@corpmail.com	Active	20 Jun 2022, 8:43 pm	40	50	$4073.00

HTML
JAVASCRIPT

<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_export_menu" class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold 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-->

   <!--begin::Hide default export buttons-->
   <div id="kt_datatable_example_buttons" class="d-none"></div>
   <!--end::Hide default export buttons->
  </div>
 </div>
 <div class="card-body">
  <table class="table align-middle border rounded table-row-dashed fs-6 g-5" id="kt_datatable_example">
   <thead>
    <!--begin::Table row-->
    <tr class="text-start text-gray-400 fw-bold 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-semibold 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-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 KTDatatablesExample = 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_buttons'));

        // Hook dropdown menu click event to datatable export buttons
        const exportButtons = document.querySelectorAll('#kt_datatable_example_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');

            if ( !table ) {
                return;
            }

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

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