datatableevent

trying to catch data table event

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css?ver=4.5.1">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.0/jquery-migrate.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/ju/dt-1.10.12/cr-1.3.2/r-2.1.0/sc-1.4.2/datatables.css">
<script src="https://cdn.datatables.net/v/ju/dt-1.10.12/cr-1.3.2/r-2.1.0/sc-1.4.2/datatables.js"></script>
<table id="files">
	<thead>
		<tr >
			<th valign="bottom">File Name</th>
			<th valign="bottom">Length</th>
			<th valign="bottom">Action</th>
			<th valign="bottom">Speaker Names</th>
			<th valign="bottom">Turnaround Options</th>
			<th valign="bottom">Classification</th>
			<th valign="bottom">Notes</th>
		</tr>
	</thead>
	<tr>
		<td >Test2.mov</td>
		<td >00:00:40</td>
		<td >
		<div id="actiongroup1">
			<input type="radio" name="action_1_d66f40de" value="Process" id="radio_1" CHECKED />
			<label for="radio_1">Process</label><br />
			<input type="radio" name="action_1_d66f40de" value="Hold" id="radio_2" />
			<label for="radio_2">Hold</label><br />
			<input type="radio" name="action_1_d66f40de" value="Delete" id="radio_3" />
			<label for="radio_3">Delete</label><br />
		</div>
		</td>
		<td > <TEXTAREA name="subjects_1_d66f40de" rows="4" cols="15" ></TEXTAREA> </td>
		<td > 
		<div id="servicegroup1" class="service_opts">
			<input type="radio" name="service_1_d66f40de" value="Normal" id="radio_4" CHECKED />
			<label for="radio_4">Normal</label><br />
			<input type="radio" name="service_1_d66f40de" value="Rush" id="radio_5" />
			<label for="radio_5">Rush</label><br />
		</div>
		<div id="tcopt1">
			<input type="checkbox" name="TC_1_d66f40de" value="Yes" class="tc_button" id="TCcheck1_1_d66f40de" />
			<label for="TCcheck1_1_d66f40de">Timecode</label> 
		</div>
		</td>
		<td >
		<div >
			<select name="style_1_d66f40de" id="style-1">
				<option...

JavaScript

jQuery(document).ready(function ($) {
	$(document).on( 'init', function ( e, settings ) {
		var api = new $.fn.dataTable.Api( settings );
	 
		console.log( 'New DataTable created:', api.table().node() );
	} );

	// this should appear before the 'init.dt' fires (and it does.)
	console.log('initializing a datatable');

	var log_table = $('#files').dataTable({
		'responsive': true,
		'autoWidth': false,
		'paging': false,
		'searching':false,
		'ordering':false,
		'columns': [
			{responsivePriority: 1},
			{responsivePriority: 7},
			{responsivePriority: 5},
			{responsivePriority: 3},
			{responsivePriority: 4},
			{responsivePriority: 2},
			{responsivePriority: 6},	
		]
	});
	console.log('setting up on event');
	
	/*$('#files').on('column-visibility', function ( e, settings, column, state ) {
    	console.log(
        	'Column '+ column +' has changed to '+ (state ? 'visible' : 'hidden')
		);
	});*/

	console.log(log_table);
	
	$('#files').on('draw.dt',function() {
		alert('resized');
	});
	
	log_table.on('draw',function() {
		alert('resized');
	});
	
	log_table.on('responsive-resize', function ( e, datatable, columns ) {
		var count = columns.reduce( function (a,b) {
			return b === false ? a+1 : a;
		}, 0 );
	  alert( count +' column(s) are hidden' );
		console.log( count +' column(s) are hidden' );
	});
	
	log_table.on( 'responsive-display', function ( e, datatable, row, showHide, update ) {
    	console.log( 'Details for row '+row.index()+' '+(showHide ? 'shown' : 'hidden') );
	});

});