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 | Status | Date Joined | No. Orders | No. Products | Total | |
|---|---|---|---|---|---|---|
| Emma Smith | smith@kpmg.com |
Active
|
10 Nov 2025, 11:30 am | 48 | 53 | $2819.00 |
| Melody Macy | melody@altbox.com |
Active
|
10 Nov 2025, 9:23 pm | 83 | 93 | $2327.00 |
| Max Smith | max@kt.com |
Active
|
20 Jun 2025, 8:43 pm | 81 | 90 | $3675.00 |
| Sean Bean | sean@dellito.com |
Active
|
19 Aug 2025, 9:23 pm | 29 | 38 | $2867.00 |
| Brian Cox | brian@exchange.com |
Active
|
24 Jun 2025, 10:10 pm | 20 | 31 | $1613.00 |
| Mikaela Collins | mik@pex.com |
Active
|
22 Sep 2025, 8:43 pm | 76 | 88 | $1116.00 |
| Francis Mitcham | f.mit@kpmg.com |
Active
|
24 Jun 2025, 5:20 pm | 48 | 63 | $3284.00 |
| Olivia Wild | olivia@corpmail.com |
Active
|
21 Feb 2025, 5:20 pm | 48 | 61 | $4354.00 |
| Neil Owen | owen.neil@gmail.com |
Active
|
25 Oct 2025, 10:30 am | 1 | 10 | $1142.00 |
| Dan Wilson | dam@consilting.com |
Active
|
25 Oct 2025, 11:05 am | 99 | 112 | $1314.00 |
| Emma Bold | emma@intenso.com |
Active
|
22 Sep 2025, 6:05 pm | 53 | 58 | $1711.00 |
| Ana Crown | ana.cf@limtel.com |
Active
|
15 Apr 2025, 6:43 am | 85 | 91 | $2148.00 |
| Robert Doe | robert@benko.com |
Active
|
10 Mar 2025, 5:30 pm | 31 | 44 | $3214.00 |
| John Miller | miller@mapple.com |
Active
|
05 May 2025, 10:10 pm | 30 | 38 | $2539.00 |
| Lucy Kunic | lucy.m@fentech.com |
Active
|
25 Jul 2025, 6:43 am | 62 | 69 | $4614.00 |
| Ethan Wilder | ethan@loop.com.au |
Active
|
25 Oct 2025, 11:30 am | 55 | 61 | $4378.00 |
| Ethan Wilder | ethan@loop.com.au |
Active
|
10 Nov 2025, 5:30 pm | 24 | 39 | $4509.00 |
| Emma Smith | smith@kpmg.com |
Active
|
22 Sep 2025, 6:05 pm | 45 | 56 | $2608.00 |
| Melody Macy | melody@altbox.com |
Active
|
15 Apr 2025, 11:30 am | 89 | 98 | $3441.00 |
| Max Smith | max@kt.com |
Active
|
10 Mar 2025, 8:43 pm | 73 | 79 | $3252.00 |
| Sean Bean | sean@dellito.com |
Active
|
15 Apr 2025, 5:20 pm | 74 | 86 | $1131.00 |
| Brian Cox | brian@exchange.com |
Active
|
21 Feb 2025, 11:30 am | 72 | 86 | $4424.00 |
| Mikaela Collins | mik@pex.com |
Active
|
22 Sep 2025, 5:20 pm | 78 | 88 | $2532.00 |
| Francis Mitcham | f.mit@kpmg.com |
Active
|
10 Nov 2025, 5:30 pm | 85 | 99 | $1582.00 |
| Olivia Wild | olivia@corpmail.com |
Active
|
10 Mar 2025, 10:30 am | 65 | 75 | $2122.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 fs-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">
<i class="ki-duotone ki-exit-down fs-2"><span class="path1"></span><span class="path2"></span></i>
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-500 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-gray-900 text-hover-primary">Emma Smith</a>
</td>
<td>
<a href="#" class="text-gray-900 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 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();
});
2025©
Keenthemes
