Issue adding a Column

hobbit36

I have a DataTable which has columns that need to be changed dynamically based on the choice of the user. At first when someone accesses the page I just have an empty generic table which contains some of the overlapping columns between choices (as the user hasn't had a chance to specify the type of data). Here's the details of how the original table looks:

Table = $('#mydata').DataTable({

        data:[],
        columns: [
                { "title": "col1", data: 'col1' },
                { "title": "col2" , data: 'col2'},
                { "title": "col3" , data: 'col3'},
                { "title": "col4" , data: 'col4'},
                { "title": "col5" , data: 'col5'},
                 { "title": "col6" , data: 'col6'},
                 { "title": col7" , data: 'col7'},
                 { "title": "col8" , data: 'col8'}
        ],
         info: false,
        "searching":   false,
        "pageLength": 50,
        "scrollX": true,
        buttons: [
            'csv'
        ],
    } );

When a choice is made. An Ajax call is made, as shown below:

$("#loadButton").click(function(){

            $.ajax({
                url: '/foo/bar,
                type : "GET",
                data: { },      //Data I send over to the server
                dataType: 'json',

                success: function (response) {

                      Table.destroy();   //First I destroy the table

                      //Reinstantiate the variable
                      Table = $('#mydata').DataTable({
                            data: response.data,
                            columns: [
                                    { "title": "col1", data: 'col1' },
                                    { "title": "col2" , data: 'col2'},
                                    { "title": "col3" , data: 'col3'},
                                    { "title": "col4" , data: 'col4'},
                                    { "title": "col5" , data: 'col5'},
                                    { "title": "col6" , data: 'col6'},
                                    { "title": col7" , data: 'col7'},
                                    { "title": "col8" , data: 'col8'},
                                    { "title": "col9" , data: 'col9'},
                            ],
                            info: false,
                            "searching":   false,
                            "pageLength": 50,
                            "scrollX": true,
                            buttons: [
                                'csv'
                            ],
                    } );

                }

            });
});

The problem is that when I make the call, the table isn't loading. Here's what's coming up:

Uncaught TypeError: Cannot read property 'style' of undefined
at _fnCalculateColumnWidths (jquery.dataTables.js:5603)
at _fnInitialise (jquery.dataTables.js:4726)
at loadedInit (jquery.dataTables.js:1320)
at HTMLTableElement.<anonymous> (jquery.dataTables.js:1332)
at Function.each (jquery-3.2.1.min.js:2)
at r.fn.init.each (jquery-3.2.1.min.js:2)
at r.fn.init.DataTable [as dataTable] (jquery.dataTables.js:869)
at r.fn.init.$.fn.DataTable (jquery.dataTables.js:15172)
at Object.success (goalies.js:41)
at i (jquery-3.2.1.min.js:2)

Looks like it's this here that's causing the issue:

headerCells[i].style.width = column.sWidthOrig !== null && column.sWidthOrig !== '' ?

So it has to be related to the fact that I'm adding a column because if I get rid of the extra one at the end (and just do nothing or maybe change around how the other eight are) it works perfectly fine. But I'm kind of confused as to how the previous table's column #'s (which was destroyed) matters to the new one.

Any help here would be appreciated.

Also here's my HTML code for the table:

<div class="container" id="example_table">
    <table class="table table-striped table-bordered" cellspacing="0" width="100%" id="mydata">
        <thead class="text-primary"></thead>
    </table>
</div>

kthorngren

This thread should answer your questions:
https://datatables.net/forums/discussion/comment/115207/#Comment_115207

Kevin

Dalex73

You could also try adding $("thead", table).remove(); after destroy and that might fix it.

hobbit36

@Dalex73
Thanks but it doesn't seem to work.

@kthorngren

I'm sorry Kevin, but are you saying I should create all the columns initially and then hide/unhide as I go along?

kthorngren

Sorry missed that you are using destroy(). Using my phone at the moment. I'm not sure why your code is not working.

Kevin

hobbit36

UPDATE:

Ok, so I found that putting

"autoWidth": false,

in the new DataTable constructor gets rid of the error and loads all of the rows of data. The problem now is that while it loads the data for all the columns, it's now missing the column name in the the column header.

So, for example, if my original table has 8 columns and my new data has 9. Then when I load the new data, the header only has 8 different column names (which my original generic table has) but below it there are 9 different columns of data. So it's just the column name not showing up

kthorngren

Maybe try this:
$('#mydata').DataTable().destroy();

Typically you don't want to disable autoWidth.

Kevin

hobbit36

@kthorngren

Yeah, it doesn't seem to help. That causes the same error to come back again.

hobbit36

I posted a simple test case here (it's a little rough but it gets my problem across)

https://jsfiddle.net/pLpkhb7d/1/

bindrid

I strongly suspect that your problem is that you do not empty out all the rows in tbody at some point. I get rid of the error this way...

    Table.destroy();

    $("#mydata").html('<thead class="text-primary"></thead><tbody></tbody>');

hobbit36

@bindrid

Yep, that was it. Thanks!