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

JRMA

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

kthorngren

I'm confused by your code snippets and what actually happens. You state that you create a table and it has this row:

<td valign="top" colspan="2" class="dataTables_empty">No data available in table</td>

Then you initialize with this:
var table = $('#policeReportTable').DataTable();

And get the Cannot set property '_DT_CellIndex' of undefined. You noted that you found that error occurs with colspan in the tbody. In this case you have colspan="2" in the tbody. You could use jQuery to empty the table first with something like this:
$('#policeReportTable').empty();

And this is how I Initialized the table:

Its not clear to me how this code relates to the first. Are you doing this after the var table = $('#policeReportTable').DataTable();? and does this id id="'+field.id+'Table" match #policeReportTable' or is it a different table?

Probably the bets thing to do is link to your page or a test case replicating this issue. This way we can see exactly what is happening.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

JRMA

Hi Kevin,

I will try to explain the steps I followed.

I initialize the table with this code:

var table =   $( '<table id="policeReportTable" 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']
            }
        } );

When the page is loaded, the HTML generated by this code is the following:

<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="odd">
                <td valign="top" colspan="2" class="dataTables_empty">No data available in table</td>
            </tr>
            </tbody>
        </table>

Once the page is completely load, the datatable looks like this:

Next step is when the error happens. There is a file uploader field in the page and when a new file is uploaded, an event is triggered and one function is invoked to add a new row in the datatable.

The code to do this is:

handleFiles: function ( event, page ) {
        var input = event.target;
        var self = this;
        var files = input.files;
        var table = $('#policeReportTable').DataTable();

        $.each(files , function ( i, file ) {
            table.row.add([file.name,file.size]).draw(true);
        } );
    }

And I get the error, the first time the handleFiles function is invoked in this line:

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

No row is added. If I upload a new file, then the row is added without any error. But the "no data available... " row does not dissapear.

I will try to prepare a test case, but it's gonna take me some time.

Thanks

colin

Hi @JRMA ,

It looks like you're using colspan in the table body, that isn't supported - see here.

Cheers,

Colin

JRMA

Thanks Colin for your answer.

But the colspan was added by dataTables js library. As I am not adding that row. It is automatically added when there is no data for the table.

Check if test case works: http://live.datatables.net/sumoxaco/1

Regards,

Javier

kthorngren

Yes, the colspan is from Datatables and it will remove that row when data is added.

There isn't anything obvious in the code snippets you posted above. I took your code snippets and created a working example:
http://live.datatables.net/dimoziri/1/edit

Click the add row button.

The test case has a lot of code and doesn't seem to be running. There are some console errors. Without actually seeing the problem occur it would be very difficult to troubleshoot.

Can you post a link to your page or update the test case to show the issue? Maybe you can reduce the code in the test case to just show the problem.

Kevin