My table is

<table id="EmployeesTable" style="width: 100%;" class="grid-table06 border-one">
    <thead>
        <tr>
            <th width="80%" align="left" valign="middle">Name</th>
            <th width="20%" align="left" valign="middle">Department</th>
            <th>Id</th>
        </tr>
    </thead>
</table>

My script as follows

$(function () {
    $(".switchDate").click(function () {
        var id = $(this).attr("rel");
        fetchEmployeedetails(id);
    });

    fetchEmployeedetails(@model.Id); //on load

    function fetchEmployeedetails(id) {
        $("#EmployeesTable").dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "/Employees/FetchDetails?Deptid=" + id + "&thresholdLow=4&threshold=100",
            "sPaginationType": "full_numbers",
            "bDestroy": true,
            "aaSorting": [[1, 'desc']],
            "asStripClasses": ['color01', 'color03'],

            "aoColumnDefs": [{
                "aTargets": [2],
                "bVisible": false
            }, {
                "aTargets": [1],
                "fnRender": function (oObj) {
                    return "<a href='#showemployees' rel='" + oObj.aData[2] + "'></a>";
                }
            }]
        });
    }
});

On load it works fine not showing the hidden "Id" column but in case when I choose the id by switchDate on click function it causes the hidden column to be visible for second.

How can I hide the column permanently?