Error when re-initialize datatable with hidden column(s)

noob_dt

Dear team,

I have a code to initialize datatable like this:

datasource = $('#dt_source').DataTable({
        "ajax": {
            "url": getURL, //-- getURL was fulfilled before this line
            "datatype": "json"
        },
        //- destroy existing table
        "destroy": true,
        "columns": [
            {
                //- 1
                "data": "ID"
            },
            {
                //- 2
                "data": "Volume"
            },
            {
                //- 3
                "data": "ID_Another"
            },
        ],
        "columnDefs": [
                       {
                "visible":false, "targets": [0]
            }
        ],
        "language": {
                 "emptyTable": "there is no source"
        }
});

In HTML by default I hide panel "panelSource" contain datatable. When needed I will show the panel and initialize data by for datatable

 <div class="row" id="panelSource" style="display:none;">
                <div class="col-12 p-3 mt-3">
                    <table id="dt_source" class="table table-striped hover compact" style="width:100%;">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Volume</th>
                                <th>ID_Another</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

Issue is if I don't hide any column, everything work perfectly. But if I hide any column in datatable (I still need refer data of that column later) it will cause error: Uncaught TypeError: Cannot read property 'style' of undefined

I did check <th> tag matched my columns defined in the code.

Could you please help me, thank you!

kthorngren

The code snippets you provided work here:
http://live.datatables.net/wadanixu/1/edit

I used a URL that is available in the JS BIN environment and updated the columns.data to match the JSON response. Please update the example or provide a link to our page for debugging.

Kevin

noob_dt

Thank kthorngren please support to check this sample: http://live.datatables.net/wadanixu/7

My actual code is much more complex with extra tasks between. But idea is datatable data can be binded mutiple times.

noob_dt

You can try to click show button fast you will see the error. Maybe due loading was not finished?

kthorngren

Ok but it doesn't seem the problem is replicated with the test case. In order to help we will need to see the problem. Possibly the error occurs with a specific JSON response?

Kevin

noob_dt

It's the case kthorngren. You can see that if we remove:

"columnDefs": [
             {
      "visible":false, "targets": [0]
            }
        ],

Issue will not happen.
Please refer this on: http://live.datatables.net/wadanixu/8

kthorngren

I updated the example to hide te column and it still seems to work:
http://live.datatables.net/loresiho/1/edit

Kevin

noob_dt

Thank kthorngren. Your code is not work in my case but I think I found why it cause the error.

When we reload table too fast say 02 times in a seconds issue will happened. I have optimized my code to not call reload table too fast and it works.

Thank for your time and efforts.

kthorngren

Sorry didn't realize you were reloading the Datatable using an interval timer. I suppose if they reloads overlap while initializing the previous table you could get an error. You could try ajax.reload() instead of destroying and reinitializing the Datatable in the loaddata() function. Another option is to use jQuery ajax to fetch the data and in the success function load the Datatable data and start the interval timer so you don't overlap requests.

You could try the same interval timer with the test case to see what happens.

Kevin