Error when the table is empty: Cannot set property '_DT_CellIndex' of undefined

Hi all,

I am getting this error when trying to get the API reference with DataTable() call. I have search the error and in most cases it seems related to the use of colspan in tbody. The point is that my table has no data when I create it and it automatically adds a "No data available in table" row.

<table id="policeReportTable" class="display compact dataTable no-footer" style="width:100%" role="grid">
<thead>
    <tr role="row">
        <th class="dt-body-right sorting_asc" tabindex="0" aria-controls="policeReportTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="File Name: activate to sort column descending" style="width: 0px;">File Name</th>
        <th class="dt-body-right sorting" tabindex="0" aria-controls="policeReportTable" rowspan="1" colspan="1" aria-label="File Size: activate to sort column ascending" style="width: 0px;">File Size</th>
    </tr>
</thead>
<tbody>
    <tr class="">
        <td valign="top" colspan="2" class="dataTables_empty">No data available in table</td>
    </tr>
</tbody>
</table>

I want to upload files and show a list of uploaded files in my page, but the first time I try to add a new row, it is failing when invoking the API access method.

var table = $('#policeReportTable').DataTable();

The exception thrown is:

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
at _fnCreateTr (jquery.dataTables.js?1533638246588:3115)
at _fnAddData (jquery.dataTables.js?1533638246588:2434)
at HTMLTableRowElement.<anonymous> (jquery.dataTables.js?1533638246588:2462)
at jquery.js?1533638246588:162
at Function.map (jquery.js?1533638246588:451)
at jQuery.fn.init.map (jquery.js?1533638246588:161)
at _fnAddTr (jquery.dataTables.js?1533638246588:2460)
at loadedInit (jquery.dataTables.js?1533638246588:1307)
at HTMLTableElement.<anonymous> (jquery.dataTables.js?1533638246588:1332)
at Function.each (jquery.js?1533638246588:362)

And this is how I Initialized the table:

var table =   $( '<table id="'+field.id+'Table" class="display compact" style="width:100%">' );

        var cols = [
            {
                title: datInstance.messages['decisionWizard.lbl.fileName'],
                className: 'dt-body-right'
            },
            {
                title: datInstance.messages['decisionWizard.lbl.fileSize'],
                className: 'dt-body-right'
            }];

        table.DataTable( {
            ordering: true,
            info: false,
            searching: false,
            paging: false,
            processing: false,
            columns: cols,
            language: {
                sZeroRecords: datInstance.messages['common.lbl.emptyrecords'],
                emptyTable: datInstance.messages['common.lbl.emptyrecords']
            }
        } );

It only happens the first time I call DataTable() method. Second time and following times, I must do a clear if I want that "empty table" row to be deleted. Could anyone help me?

Regards