Problem when redefining columnDefs

SlowburnAZ

So, I seem to be running into a weird issue...

I have a report that I'm creating, and depending on whether a checkbox is checked or not, I supply the $('#myTable').DataTable(...) call with a different array for the columnDefs parameter.

The problem is, whichever columnDefs array is supplied first seems to stick around even though $('#myTable').DataTable(...) is called again with a different columnDefs array. Now, before the $('#myTable').DataTable(...) is called again, I am making sure to call myDataTable.clear() and myDataTable.destroy() (When I initialize the datatable, I'm setting it to the myDataTable variable so I can reference it later, like so: var myDataTable = $('#myTable').DataTable(...))

Is there a way to make sure the new columnDefs array takes hold when the datatable is created again?

kthorngren

Based on your description I built a simplistic example. Seems to work:
http://live.datatables.net/pekoquvu/1/edit

Maybe you can provide a test case (update the above if you want) or link to your page showing the issue.

Kevin

SlowburnAZ

I can't recreate this in the JSBin, so I'll try to find some workaround.

kthorngren

Maybe your checkbox check isn't working and the wrong array is chosen. Maybe output a console message to verify the code paths when you have the checkbox checked and not checked.

If you swap the arrays does the other columnDefs work in general?

Kevin

SlowburnAZ

I can verify in the console that the columnDefs is being changed before I call myDataTable = $('#reportResults table').DataTable({...}); again.

It's driving me nuts. lol

I'll try again to get an example that closely matches what I'm doing.

kthorngren

Maybe post your JS code here and we can take a cursory look.

Kevin

SlowburnAZ

I can't really post the exact JS, as it's all tied into our system, which includes authentication, etc. This is as close as I can get, though it works as expected here: http://live.datatables.net/pekoquvu/3/edit

In the real case, the data is coming from an ajax call to a server, of course. I'm not, howver, using the serverSide option... I'm getting the response, and then supplying that to the .DataTable({...}) call as a 'data' option, like in the JSBin above.

Some screenshots and posting the columnDefs object might be the best I can do...

So,
As you can see in the following screenshot, there are 14 columns visible, and I've included the columns object below:

var columnDefs =

[
    {
        "targets": 0,
        "orderable": true,
        "visible": true,
        "data": "company_name"
    },
    {
        "targets": 1,
        "orderable": true,
        "visible": true,
        "data": "calls",
        "className": "_calls"
    },
    {
        "targets": 2,
        "orderable": true,
        "visible": true,
        "data": "sms",
        "className": "_smss"
    },
    {
        "targets": 3,
        "orderable": true,
        "visible": true,
        "data": "emails",
        "className": "_emails"
    },
    {
        "targets": 4,
        "orderable": true,
        "visible": true,
        "data": "confirmed",
        "className": "_confirmed"
    },
    {
        "targets": 5,
        "orderable": true,
        "visible": true,
        "data": "canceled",
        "className": "_canceled"
    },
    {
        "targets": 6,
        "orderable": true,
        "visible": true,
        "data": "ambiguous",
        "className": "_ambiguous"
    },
    {
        "targets": 7,
        "orderable": true,
        "visible": true,
        "data": "reschedules",
        "className": "_reschedules"
    },
    {
        "targets": 8,
        "orderable": true,
        "visible": true,
        "data": "leftnote",
        "className": "_leftnote"
    },
    {
        "targets": 9,
        "orderable": true,
        "visible": true,
        "data": "total_responses",
        "className": "_totalresponses"
    },
    {
        "targets": 10,
        "orderable": true,
        "visible": true,
        "data": "total_responses_percent",
        "className": "_totalresponsespercent"
    },
    {
        "targets": 11,
        "orderable": true,
        "visible": true,
        "data": "average_hours_to_respond",
        "className": "_avghours"
    },
    {
        "targets": 12,
        "orderable": true,
        "visible": true,
        "data": "average_time_to_respond",
        "className": "_avgtime"
    },
    {
        "targets": 13,
        "orderable": true,
        "visible": true,
        "dataSort": 15,
        "data": "contact_method",
        "className": "text-center"
    },
    {
        "targets": 14,
        "visible": false,
        "data": "contact_month_year",
        "className": "_monthrange"
    },
    {
        "targets": 15,
        "visible": false,
        "data": "contact_method",
        "className": "_contactmethod"
    },
    {
        "targets": 16,
        "visible": false,
        "data": "contact_month_year"
    }
]

Now, if I re-run the report with the columnDefs below, you can see that there are still only 14 columns, but the columnDefs show that the 15th column should be visible:

var columnDefs =

[
    {
        "targets": 0,
        "orderable": true,
        "visible": true,
        "data": "company_name"
    },
    {
        "targets": 1,
        "orderable": true,
        "visible": true,
        "data": "calls",
        "className": "_calls"
    },
    {
        "targets": 2,
        "orderable": true,
        "visible": true,
        "data": "sms",
        "className": "_smss"
    },
    {
        "targets": 3,
        "orderable": true,
        "visible": true,
        "data": "emails",
        "className": "_emails"
    },
    {
        "targets": 4,
        "orderable": true,
        "visible": true,
        "data": "confirmed",
        "className": "_confirmed"
    },
    {
        "targets": 5,
        "orderable": true,
        "visible": true,
        "data": "canceled",
        "className": "_canceled"
    },
    {
        "targets": 6,
        "orderable": true,
        "visible": true,
        "data": "ambiguous",
        "className": "_ambiguous"
    },
    {
        "targets": 7,
        "orderable": true,
        "visible": true,
        "data": "reschedules",
        "className": "_reschedules"
    },
    {
        "targets": 8,
        "orderable": true,
        "visible": true,
        "data": "leftnote",
        "className": "_leftnote"
    },
    {
        "targets": 9,
        "orderable": true,
        "visible": true,
        "data": "total_responses",
        "className": "_totalresponses"
    },
    {
        "targets": 10,
        "orderable": true,
        "visible": true,
        "data": "total_responses_percent",
        "className": "_totalresponsespercent"
    },
    {
        "targets": 11,
        "orderable": true,
        "visible": true,
        "data": "average_hours_to_respond",
        "className": "_avghours"
    },
    {
        "targets": 12,
        "orderable": true,
        "visible": true,
        "data": "average_time_to_respond",
        "className": "_avgtime"
    },
    {
        "targets": 13,
        "orderable": true,
        "visible": true,
        "dataSort": 15,
        "data": "contact_method",
        "className": "text-center"
    },
    {
        "targets": 14,
        "visible": true,
        "data": "contact_month_year",
        "className": "_monthrange"
    },
    {
        "targets": 15,
        "visible": false,
        "data": "contact_method",
        "className": "_contactmethod"
    },
    {
        "targets": 16,
        "visible": false,
        "data": "contact_month_year"
    }
]

I can't help but think that something is sticking around in memory. Maybe I'm not calling the .clear().draw() and .destroy() methods at the right time or something.

SlowburnAZ

And here's the crazy part...

Let's say I run the report and the columnDefs array that has a render method inside of the object with "targets": 14. If I run the report again with the different columnDefs array (one that doesn't have that render method on that column), I can put a breakpoint inside of the render method on the original columnDefs array and that render method is still called.

This is after verifying that the right columnDefs array is being used in the .DataTable({...}) call.

SlowburnAZ

Oh god... finally figured it out.

I was creating the object passed into .DataTable({...}) using the extend method from Lodash.
For some reason, I thought that the _.extend method returned a new object, much like Object.assign(), but of course it wasn't.

So, config settings were hanging around like I thought, but until now I didn't know why. smh

kthorngren

Glad you found the issue.

Kevin

SlowburnAZ

Thanks for the help!