Problem with show/hide columns.

st4rnin3

I have been fighting with this for a while now. I am getting the column object, and the code runs without error, but i just will not show or hide the columns.

Can anyone see what I am doing wrong? I feel like i must be missing something simple.

   <label>
            <input type="checkbox" data-field="Id" id="cbId" />
          Id</label>

    <div id="datalist" style="width: 100%; display: inline-block">
    </div>


    <script>
        var oTable;

        $(document).ready(function () {

            RefreshData();
            
        });

    $('#divColumnNames input').on('click', function (e) {

        //e.preventDefault();

        var column = oTable.column( $(this).attr('data-field') );

        // Toggle the visibility
        column.visible( ! column.visible() );

    });

    function RefreshData() {

        $.ajax({
            type: "POST",
            url: "<%: ResolveUrl("~/api/API_Member.asmx/SearchMembers")%>",
                cache: false,
                contentType: "application/json; charset=utf-8",
                data: '{"jsonFilter": { "companyName": "greater" } }',
                dataType: "json",
                success: function (result) {

                    $('#datalist').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="dataTable"></table>');
                    oTable = $('#dataTable').DataTable({
                        //stateSave: true,
                        "scrollY": "500px",
                        "scrollX": true,
                        "paging": false,
                        "data": result.d,
                        "columns": [
                            { "title": "Id", "data": "Id", visible: false },
                            {
                                "title": "Edit", "mData": "Id", "mRender": function (data, type, full) {
                                    return '<a href="/member/profileedit.aspx?MID=' + data + '">Edit</a>';
                                }
                            },
                            {
                                "title": "Stats", "mData": "Id", "mRender": function (data, type, full) {
                                    return '<a href="/member/dashboard.aspx?MID=' + data + '">Stats</a>';
                                }
                            },
                            { "title": "Company Name", "data": "CompanyName" },
                            { "title": "Address1", "data": "Address1", "visible": false },
                        ],


                    });
                },
                error: function (xhr, txt, err) {
                    alert("error connecting to data: " + txt);
                }
            });

        }

    </script>