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

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

JRMAJRMA Posts: 3Questions: 1Answers: 0

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

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • JRMAJRMA Posts: 3Questions: 1Answers: 0

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @JRMA ,

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

    Cheers,

    Colin

  • JRMAJRMA Posts: 3Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited April 2019

    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

This discussion has been closed.