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?
