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

EXPORT BUTTON ON MODAL


If I open the modal 2 times then export the excel im getting 2 same files, If I open the modal 3 times i get 3 excel file it keep multiplying how to avoid this kind of scenario thanks

here is my implementation/source code

$(document).on("click", "#dealer-collection", function (e) {
modalWeekLabel = $(this).data("week-label");
modalWeekCoverage = $(this).data("start-end");
$("#total_dealer_payment_modal").modal("show");
});

//START DEALER COLLECTION
$("#total_dealer_payment_modal").on("shown.bs.modal", function () {
$("#total_dealer_payment_modal").find("#week_label").html(modalWeekLabel);
$("#total_dealer_payment_modal")
.find("#week_coverage")
.html(modalWeekCoverage);
var totalDealerCollectionTable = $("#dealer_table").DataTable({
scrollY: "600px",
scrollX: true,
scrollCollapse: true,
processing: true,
serverSide: true,
bDestroy: true,
pageLength: 100,
lengthMenu: [100, 300, 500],
order: [[3, "decs"]],
ajax: "/collectionReport/getTotalDealer/" + modalWeekLabel,
columns: [
{
data: "reference_number",
name: "reference_number",
},
{
data: "customers.name",
name: "customers.name",
},
{
data: "payment_type",
name: "payment_type",
},
{
data: "payment_date",
name: "payment_date",
render: function (data, type, row) {
return moment(data, "YYYY-MM-DD").format("MM/DD/YYYY");
},
},
{
data: "payment_time",
name: "payment_time",
},
{
data: "created_name",
name: "created_name",
},
{
data: "amount",
name: "amount",
},
],
columnDefs: [
{
targets: [6],
render: function (data, type, row) {
var formattedValue = $.fn.dataTable.render
.number(",", ".", 2)
.display(data); // Format the value
if (parseFloat(data) < 0) {
// Check if the value is negative
return (
'<span class="text-danger">' +
formattedValue +
"</span>"
); // Apply the class to the cell
} else {
return (
'<span class="text-primary">' +
formattedValue +
"</span>"
); // Return the original formatted value
}
},
className: "text-end",
},
],
drawCallback: function (settings) {
var total = this.api().ajax.json().total;
if (total < 0) {
$("#totalAmount2").html(
'<span class="text-danger">' +
total.toLocaleString("en-US", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}) +
"</span>"
);
} else {
$("#totalAmount2").html(
'<span class="text-primary">' +
total.toLocaleString("en-US", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}) +
"</span>"
);
}
},
dom:
"<'row'" +
"<'col-sm-6 d-flex align-items-center justify-conten-start'li>" +
"<'col-sm-6 d-flex align-items-center justify-content-end'p>" +
">" +
"<'table-responsive'tr>" +
"<'row'" +
">",
});

var exportButtons = () => {
const documentTitle =
"Dealer Payments - " +
modalWeekLabel +
" | Week Coverage - " +
modalWeekCoverage;
const fileName = "Dealer Payments - " + modalWeekLabel;

var buttons = new $.fn.dataTable.Buttons(totalDealerCollectionTable, {
buttons: [
{
extend: "excelHtml5",
title: documentTitle,
filename: fileName,
},
{
extend: "pdfHtml5",
title: documentTitle,
filename: fileName,
},
],
})
.container()
.appendTo($("#button-hide4"));
const exportButtons = document.querySelectorAll(
"#total_dealer_payment_modal #export-menu4 [data-kt-export]"
);
exportButtons.forEach((exportButton) => {
exportButton.addEventListener("click", (e) => {
e.preventDefault();
const exportValue = e.target.getAttribute("data-kt-export");
const target = document.querySelector(
"#total_dealer_payment_modal .dt-buttons .buttons-" +
exportValue
);
target.click();
});
});
};
exportButtons();
$("#dealer-search-input").on("keyup", function () {
totalDealerCollectionTable.search($(this).val()).draw();
});
});
//END DEALER COLLECTION


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 (3)


Hi,

You can add a global js variable to mark the table initialisation state to avoid multiple event handler/datatable init to avoid duplication.

Regards.



I tried but still same output



Hi,

Sorry, we are not able to debug your code to detect the issue. If you can share your test link we can check it only.

The issue is related to the double initialization of the event handler. You will need to logically avoid it by adding some conditions.

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  :(