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

Export Button Bug


Hi

I have experience bug when i have 2 modal that had a table in there , when i export the excel file on 1st modal it work but when i try to go on 2nd modal then export the table im downloading the excel of the first modal not the current modal

how can i make this work any recommended to solve this?

here is the source link

https://preview.keenthemes.com/html/metronic/docs/general/datatables/buttons/export


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


Hi John Lloyd,

Instead of using the same ID for export buttons in different modals, use unique IDs for each modal. This way, each export button will be associated with the correct DataTable instance.

Make sure that the click event for the export button is properly scoped to the current modal. This ensures that only the export button within the current modal is triggered when clicked.

Here's an updated version of your export button logic:


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

var buttons = new $.fn.dataTable.Buttons(tableId, {
buttons: [
{
extend: "excelHtml5",
title: documentTitle,
filename: fileName,
},
{
extend: "pdfHtml5",
title: documentTitle,
filename: fileName,
},
],
})
.container()
.appendTo($("#" + menuId));
};

// Usage
var totalATLCollectionTable = $("#atl_table").DataTable({ ... });
var exportMenuId = "export-menu5"; // Unique ID for export menu in modal 1
exportButtons(totalATLCollectionTable, exportMenuId);

var totalDealerCollectionTable = $("#dealer_table").DataTable({ ... });
var exportMenuId2 = "export-menu4"; // Unique ID for export menu in modal 2
exportButtons(totalDealerCollectionTable, exportMenuId2);


Make sure to update the export button IDs (export-menu5, export-menu4) in your HTML accordingly.



Hi,

One possible way to sort a column that has negative and positive values on datatables.net is to use a custom sorting plugin that can ignore the values that are zero or below. You can create your plugin by modifying the existing ones, such as the ones available here:

https://datatables.net/plug-ins/sorting/

Here is an example of a custom sorting plugin that can sort only the positive values in a column:


function ignoreZeroOrBelow (a, b, high) {
a = parseFloat (a);
a = a>0 ? a : high;
b = parseFloat (b);
b = b>0 ? b : high;
return ( (a < b) ? -1 : ( (a > b) ? 1 : 0));
}

jQuery.extend ( jQuery.fn.dataTableExt.oSort, {
"sort-positive-numbers-only-asc": function (a, b) {
return ignoreZeroOrBelow (a, b, Number.POSITIVE_INFINITY);
},
"sort-positive-numbers-only-desc": function (a, b) {
return ignoreZeroOrBelow (a, b, Number.NEGATIVE_INFINITY)*-1;
}
});


You can use this plugin by specifying the type and the target column in the columnDefs option, like this:


var dataTable = $ ("#example").dataTable ( {
columnDefs: [
{ type: "sort-positive-numbers-only", targets : 0 }
],
});


This plugin works by replacing the values that are zero or below with either Number.POSITIVE_INFINITY or Number.NEGATIVE_INFINITY, depending on the sorting order. This way, only the positive values are compared and sorted. You can see a demo of this plugin here:

https://jsfiddle.net/scuo0t6k/


I hope this helps you with your problem.

Thank you



How to sort a column that have negative and positive values on datatable?



Glad to hear you were able to resolve the issue! If you have any more questions or need further assistance in the future, feel free to ask.



Hi John Lloyd,

Sorry for the delay in response. To provide a more accurate solution, I'd need to see the relevant parts of your code where the issue is occurring. Could you please share the code snippets related to the modals and the export functionality so I can better understand the problem?



i already make it work thanks


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