Hide Column
HTML
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<table id="example" class="display"></table>
CSS
td.disabled {
pointer-events: none;
color: transparent;
}
JavaScript
$(document).ready(function() {
var oTable = $('#example').dataTable({
dom: 't',
data: [
['Jon', 33, 'New York'],
['Sarah', 61, 'Los Angeles'],
],
columns: [{
title: "Name"
}, {
title: "Age"
}, {
title: "City",
}, {
title: "Toggle",
defaultContent: '<select class="toggle"><option value=1>Show City</option><option value=0>Hide City</option></select>'
}]
}).api();
oTable.on('change', 'select.toggle', function() {
var val = parseInt(this.value);
var row = $(this).closest('tr');
var cell = oTable.cell(row, 2).node();
$(cell).toggleClass('disabled', !(!!val));
});
});