Problem with responsive and hidden columns

V1cu

Hello guys,

I have using DataTables and responsive extension. So, i have 9 columns, and when the table is loaded i wont to show column 6,7,8 because i want to show them dynamically on user click to some external filters.

So i have the following code:

HTML:

                   <table id="table-id" cellspacing="0" width="100%" data-feed-url="http://127.0.0.1/table-results">
                        <thead>
                        <tr>
                            <th class="never">Col 0</th>
                            <th>Col 1</th>
                            <th>Col 2</th>
                            <th>Col 3</th>
                            <th>Col 4</th>
                            <th>Col 5</th>
                            <th>Col 6</th>
                            <th>Col 7</th>
                            <th>Col 8</th>
                            <th>Col 9</th>
                            <th>Col 10</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>

JS:

     dt_ob = $('table#table-id').DataTable({
        "responsive": true,
        "serverSide": true,
        "bFilter": false,
        "ajax": {
            "url": $('table#table-id').data('feed-url'),
            "type": "POST"
        },
        "columnDefs": [
            {'sortable': false, 'targets': [-1]},
            {'visible': false, 'searchable': false, "targets": [ 6, 7, 8]}
        ],
        "order": [[ 9, "asc" ]],
        dom: "frtiS",
        scrollY: 800,
        scrollCollapse: true,
        scroller: {
            loadingIndicator: true
        }
    });

The problem is that get the following error:

Uncaught TypeError: Cannot read property 'style' of undefined

And the columns width on the header after column 5 are not correct...

V1cu

Can anyone help me please?