Multiple headers datatables dynamic - php

Question

I found a problem regarding DataTables. Previously I added Headers to DataTables Manually, like so:
<div class="table-responsive">
<table class="table table-bordered" id="example" style="width:100%;">
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
</table>
</div>
For that it doesn't matter. But when I add the header name like this (via database), like this :
<div class="table-responsive">
<table class="table table-bordered" id="example" style="width:100%;">
<thead>
<? foreach ($kolom as $row) : ?>
<th><? echo $row ?></th>
<? endforeach; ?>
</thead>
</table>
</div>
The result will create 2 stacked headers like so:
| header1 | header2 | header3 | header4 |
| header1 | header2 | header3 | header4 |
The value from $kolom is an Array like this :
Array ( [0] => Header1 [1] => Header2 [2] => Header3 [3] => Header4 )
This is the script from jQuery i use :
<script>
$(document).ready(function() {
var dataTable;
dataTable = $('#example').DataTable({
"columnDefs": [{
"defaultContent": "-",
"targets": "_all"
}],
"aoColumns": [
{data : "f1"},
{data : "f2"},
{data : "f3"},
{data : "f4"}
],
"scrollCollapse": true,
"fixedColumns": {
"left": 1
},
'processing': true,
'language': {
"loadingRecords": ' ',
"processing" : '<i class="fa fa-spinner fa-spin" style="font-size:24px;color:rgb(75, 183, 245);"></i>'
},
"scrollX": true,
});
});
</script>
I only want to show 1 header only.
Which error did I experience and which part should I fix?
Thanks, I hope I can find a solution here.