How To Export Hidden Column In Bootstrap Table

Good afternoon.

In one of my projects I had a requirement which is to export a hidden column or hidden columns in Bootstrap Table of Wenzhixin. This hidden column is a note field that contains long text of more than a hundred characters. The value of the hidden column is used in one of the column that contains an image icon and when hovered will show the value of the invisible column. The Bootstrap Table does not have this feature but a temporary solution was provided by lutol in the github issue How to export hidden column. However upon testing, the accepted solution does not work on my part since it cannot retrieve the hidden columns defined in the exportHiddenColumns property. So I made some changes in some of the logic to export the hidden column on my project. The changes are the following.

1. Create a data-hidden-columns attribute in the table and set it's value with the invisible column name. An example is the JobNotes column' data-visible property is set to false.

<table id="tblJobCosts"
		data-hidden-columns="JobNotes">
		<thead>
		<tr style="background-color: #FFFFFF;">
		    ...
			<th data-field="JobNotes" data-sortable="false" data-searchable="false" data-visible="false">Job Notes</th>
		</tr>
	</thead>
</table>

2. The exportHiddenColumns snippets below are still needed (bootstrap-table-export.js file).

$.extend($.fn.bootstrapTable.defaults, {
    showExport: false,
    exportDataType: 'basic', // basic, all, selected
    // 'json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'powerpoint', 'pdf'
    exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'],
    exportOptions: {},
    exportHiddenColumns: false
});
  
var type = $(this).data('type'),
	exportHiddenColumns = that.options.exportHiddenColumns,
	doExport = function () {
		that.$el.tableExport($.extend({}, that.options.exportOptions, {
		  type: type,
		  escape: false
		}));
};

3. Replace the codes below that will hide and show the hidden column (bootstrap-table-export.js file).

if (exportHiddenColumns != null) {
  $.each(exportHiddenColumns, function(index, value) {
	that.showColumn(value);
   });
}
	  
if (exportHiddenColumns != null) {
	$.each(exportHiddenColumns, function(index, value) {
	  that.hideColumn(value);
	});
} 

With these snippets that will access the data-hidden-columns attribute in the Bootstrap Table and will show that column on during export and hide that column again after export.

if (exportHiddenColumns !== null) {
	if (that.options.hiddenColumns !== undefined) {
		var hiddenColumns = that.options.hiddenColumns.split(",");
		if (hiddenColumns !== null) {
			$.each(hiddenColumns, function (index, value) {
				that.showColumn(value);
			});
		}
	}
}   

if (exportHiddenColumns !== null) {
	if (that.options.hiddenColumns !== undefined) {
		var hiddenColumns1 = that.options.hiddenColumns.split(",");
		if (hiddenColumns1 !== null) {
			$.each(hiddenColumns1, function (index, value) {
				that.hideColumn(value);
			});
		}
	}
}

That's it! I can now export the hidden column. I also would like to thank the author of the accepted answer in github for the idea. :-)