Im using the Default Download button on the template But the problem is not downloading the whole table , only the page 1
here is the code on how I implement it ,
Im using laravel and datatable , then fetch by ajax to process
Any idea will help thanks
$(document).ready(function() {
var currentDate = new Date();
var currentYear = moment().year();
var table = $('#monthly-table').DataTable({
scrollY: "600px",
scrollX: true,
scrollCollapse: true,
processing: true,
serverSide: true,
ajax: {
url: "/monthlyCollection/getList", // URL without data
type: "GET",
data: function(d) {
d.currentYear = currentYear;
}
},
columns: [{
data: 'name',
name: 'name'
},
{
data: 'account_number',
name: 'account_number'
},
{
data: 'monthly_payments.January',
name: 'monthly_payments.January',
render: $.fn.dataTable.render.number(',', '.',
2),
createdCell: function(td, cellData, rowData, row, col) {
$(td).addClass('text-end');
}
},
{
data: 'monthly_payments.February',
name: 'monthly_payments.February',
render: $.fn.dataTable.render.number(',', '.',
2),
createdCell: function(td, cellData, rowData, row, col) {
$(td).addClass('text-end');
}
},
{
data: 'monthly_payments.March',
name: 'monthly_payments.March',
render: $.fn.dataTable.render.number(',', '.',
2),
createdCell: function(td, cellData, rowData, row, col) {
$(td).addClass('text-end');
}
},
{
data: 'monthly_payments.April',
name: 'monthly_payments.April',
render: $.fn.dataTable.render.number(',', '.',
2),
createdCell: function(td, cellData, rowData, row, col) {
$(td).addClass('text-end');
}
},
{
data: 'monthly_payments.May',
name: 'monthly_payments.May',
render: $.fn.dataTable.render.number(',', '.',
2),
createdCell: function(td, cellData, rowData, row, col) {
$(td).addClass('text-end');
}
},
{
data: 'monthly_payments.June',
name: 'monthly_payments.June',
render: $.fn.dataTable.render.number(',', '.',
2),
createdCell: function(td, cellData, rowData, row, col) {
$(td).addClass('text-end');
}
},
{
data: 'monthly_payments.July',
name: 'monthly_payments.July',
render: $.fn.dataTable.render.number(',', '.',
2),
createdCell: function(td, cellData, rowData, row, col) {
$(td).addClass('text-end');
}
},
{
data: 'monthly_payments.August',
name: 'monthly_payments.August',
render: $.fn.dataTable.render.number(',', '.',
2),
createdCell: function(td, cellData, rowData, row, col) {
$(td).addClass('text-end');
}
},
{
data: 'monthly_payments.September',
name: 'monthly_payments.September',
render: $.fn.dataTable.render.number(',', '.',
2),
createdCell: function(td, cellData, rowData, row, col) {
$(td).addClass('text-end');
}
},
{
data: 'monthly_payments.October',
name: 'monthly_payments.October',
createdCell: function(td, cellData, rowData, row, col) {
$(td).addClass('text-end');
}
},
{
data: 'monthly_payments.November',
name: 'monthly_payments.November',
createdCell: function(td, cellData, rowData, row, col) {
$(td).addClass('text-end');
}
},
{
data: 'monthly_payments.December',
name: 'monthly_payments.December',
createdCell: function(td, cellData, rowData, row, col) {
$(td).addClass('text-end');
}
}
],
drawCallback: function(settings) {
var totals = this.api().ajax.json().totals;
// // Update the content of the element with the total number of customers
// $('#total_acc').text(totals.sumNumberOfCustomers + ' accounts');
$('#jan').text('â±' + totals.January.toLocaleString(
'en-US', {
minimumFractionDigits: 0,
maximumFractionDigits: 2
}));
$('#feb').text('â±' + totals.February.toLocaleString('en-US', {
minimumFractionDigits: 0,
maximumFractionDigits: 2
}));
$('#mar').text('â±' + totals.March.toLocaleString('en-US', {
minimumFractionDigits: 0,
maximumFractionDigits: 2
}));
$('#apr').text('â±' + totals.April.toLocaleString('en-US', {
minimumFractionDigits: 0,
maximumFractionDigits: 2
}));
$('#may').text('â±' + totals.May.toLocaleString('en-US', {
minimumFractionDigits: 0,
maximumFractionDigits: 2
}));
$('#jun').text('â±' + totals.June.toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}));
$('#jul').text('â±' + totals.July.toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}));
$('#aug').text('â±' + totals.August.toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}));
$('#sep').text('â±' + totals.September.toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}));
$('#oct').text('â±' + totals.October.toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}));
$('#nov').text('â±' + totals.November.toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}));
$('#dec').text('â±' + totals.December.toLocaleString(
'en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}));
// $('#total_percent').text(total_percent.toLocaleString('en-US', {
// minimumFractionDigits: 2,
// maximumFractionDigits: 2
// }) + '%');
},
lengthMenu: [
[100, 200, 300, 400],
[100, 200, 300, 400]
],
pageLength: 100,
});
var addExportButtons = () => {
const documentTitle = 'Monthly Collections';
const fileName = 'Monthly Collections';
new $.fn.dataTable.Buttons(table, {
buttons: [{
extend: 'excelHtml5',
title: documentTitle,
filename: fileName,
},
{
extend: 'pdfHtml5',
title: documentTitle,
filename: fileName
}
]
}).container().appendTo($('#hide_button_export'));
const exportButtons = document.querySelectorAll(
'#export_customer [data-kt-export]');
exportButtons.forEach(exportButton => {
exportButton.addEventListener('click', e => {
e.preventDefault();
const exportValue = e.target.getAttribute(
'data-kt-export');
const target = document.querySelector(
'.dt-buttons .buttons-' +
exportValue);
target.click();
});
});
};
addExportButtons();
$('#applyButtonYear').on('click', function() {
var selectedYear = $('[data-kt-year-table-filter="year"]').val();
// Check if a week is selected
if (selectedYear) {
currentYear = selectedYear;
table.ajax.reload();
} else {
// Handle the case where no week is selected
Swal.fire({
icon: 'warning',
title: 'Please select a year',
});
}
});
$('#model-search-input').on('keyup', function() {
table.search($(this).val()).draw();
});
});
Hi John Lloyd Cuare,
Will it be possible to provide us with your test link to your page in a private reply?
We are not able to debug your code since the issue is related to your code that works in your application environment.
May I know your Metronic version and the build method? Gulp or Webpack?
Regards,
âSean
I tried it but did not success on my side , how about give me sample code that have working export button using laravel and datatable and ajax? this will be a great help thanks!
Hi,
I would suggest you first try to load your ajax datatable following Working Example and when everything is working you can integrate export features.
Please note that the export features are based on JavsScript so it can only export currently shown records.
Usually, export features are done at the backend, based on the selected data source. When a user clicks export it will export all records and the export file is generated at the backend and sent back to the frontend generated export file.
Regards.