Help Doc For Dynamic ShowHideColumns Related to DataTables

Snippet

Sample HTMl
Snippet
<div class="dropdown showHideColumns" data-target="mainTable1">     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
         <i class="fa fa-gear"></i>
         Show Hide Columns
         <span class="caret"></span>
     </button>
     <ul class="dropdown-menu"></ul> 
</div> 

Here data-target=”mainTable1″ -> here mainTable1 represents the id for datatable

Required Dependent JS
Snippet
function ShowHideColumn(target, colIndex) {
	var mTable = '#' + target;
	var myDataTable = $(mTable).DataTable();
	// Get the column API object
	var column = myDataTable.column(colIndex);

	// Toggle the visibility
	column.visible(!column.visible());
}
$(document).on('click', 'a.toggle-vis', function (e) {
	e.preventDefault();
	ShowHideColumn($(this).data('target'), $(this).attr('data-column'));
});
$(document).on('change', '.toggle-vis', function (e) {
	e.preventDefault();
	ShowHideColumn($(this).data('target'), $(this).attr('data-column'));
});
$(document).ready(function (e) {
	$('.showHideColumns').each(function (item, index) {
		var t = $(this).data('target');
		var thDrop = $(this).find('.dropdown-menu');
		thDrop.html('');
		if ($('#' + t).length >= 1) {
			$('#' + t).find('thead th').each(function (index) {
				thDrop.append('<li><a href="#"><input type="checkbox" checked="" class="toggle-vis" data-column="' + index + '" data-target="' + t + '">' + $(this).text() + '</a></li>');
			});
		}
	});
});