Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

Export Button


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();
});
});


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


Hi,

Can you please refer to Export All Pages discussion from the official datatable forums.

Regards.



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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(