Remove select options from datatable header in pdf export - datatable

Question

I have included select element in header of datatable. Now all the options append and show in header when I export to pdf. I do not want to show these values in header.
<script>
$(document).ready(function() {
$('#colSearch').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6 ]
}
},
{
extend: 'pdf',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6 ],
},
],
initComplete: function () {
this.api().columns([0,1,2,3,4,5,6]).every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.header()))
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
});
$( select ).click( function(e) {
e.stopPropagation();
});
column.data().unique().sort().each( function ( d, j ) {
var val = $('<div/>').html(d).text();
select.append( '<option value="' + val + '">' + val + '</option>' );
});
});
},
});
});
</script>
This provided solution removes all of the header.
https://stackoverflow.com/a/54803204/9660462

Answer 1

You can add a format.header option to your existing exportOptions:
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6 ],
format: {
header: function ( data ) {
var n = data.indexOf("<select>");
if (n > -1) {
return data.substring(0, n);
} else {
return data;
}
}
}
}
The above code assumes your DataTable contains HTML in its headings which looks similar to the following:
<th class="sorting">
Office
<select>
<option value=""></option><option value="Edinburgh">Edinburgh</option><option value="London">London</option><option value="New York">New York</option><option value="San Francisco">San Francisco</option><option value="Singapore">Singapore</option><option value="Sydney">Sydney</option><option value="Tokyo">Tokyo</option>
</select>
</th>
This causes the heading to contain the following text, which is all the inner HTML from the th element:
Office<select><option value=""></option><optionvalue="Edinburgh">Edinburgh</option><option value="London">London</option><option value="New York">New York</option><option value="San Francisco">San Francisco</option><option value="Singapore">Singapore</option><option value="Sydney">Sydney</option><option value="Tokyo">Tokyo</option></select>
To exclude the drop-down values (in my case, the office locations), and to only show the heading (in my case, the word "Office"), my code checks for the location of the first <select> substring in the extracted text. It then ignores everything from that point onwards.
The format.header option is documented in this page.