In my HTML table, I have included a drop-down feature for users to select the row they want to view, along with an export button that allows them to save the data in Excel format.
During the exporting process, I encountered an issue where hidden rows were still being exported. To address this, I applied the CSS property display:none
and added a class to all hidden rows, removing them before export. However, I noticed that two extra columns were still being exported, which puzzled me.
$("#save").on("click", function() {
var selectedType = [];
$.each($(".dropdown-menu input[type='checkbox']:checked"), function() {
selectedType.push($(this).val());
});
$.each($("#salesBreakupTable tr.filterData td:nth-child(2)"), function() {
if (jQuery.inArray($(this).text(), selectedType) == -1 && $(this).text() != "Total") {
$(this).parent().css("display", "none");
$(this).parent().addClass("hide-data"); //class i am adding to hidden rows
} else {
$(this).parent().css("display", "");
$(this).parent().removeClass("hide-data");
}
});
});
$("#export").click(function() { //export button on click
var copyTable = $("#salesBreakupTable").clone(false).attr('id', '_copy_dailySales');
copyTable.insertAfter($("#dailySales"));
copyTable.find('.hide-data').remove(); //removing rows while exporting
copyTable.table2excel({
filename: "Daily Sales Report.xls"
});
copyTable.remove();
});
When selecting credit
from the drop-down, the exported result shows two extra columns highlighted in red after the table:
https://i.sstatic.net/tDegr.png
To clarify, the additional columns are caused by fixing certain columns with data-tables, specifically the first two columns, resulting in their inclusion during export.
Note
While I considered using Data-tables, its limitation of not supporting col-span during export made it unsuitable as it aligned all columns to the left, presenting a poor display in Excel.
Edit
This recent discovery sheds light on why the extra columns are being exported, attributed to the fixed columns set with Data-tables, noticeable with the first two columns in this case.
Edit
If there are alternative approaches worth exploring, I am open to suggestions. Despite attempting Data-tables, the lack of support for columns with col-span led me to utilize table2export
for exporting purposes.