title: jQuery dataTables header click custom event
body: <p>How can I add a custom click event for some of the table headers in the datatable. I have removed the default sorting event from every column except 1st column. So I want to add the custom event to those columns. And I want to find the index of the column the user clicked.</p>
  
  <p>What I have tried so far is this. But I can't figure out how to find the index of the column user clicked.</p>
  
  <pre><code>var table = $('#example').dataTable( {
      "data": data_set,
      "columns": column_titles,
      "columnDefs": column_defs
  } );
  
  $('#example thead').on( 'click', 'th', function () {         
      alert( 'Column clicked on: ');
  } );
  </code></pre>
  
  <p>P.S.
  I have found this article <a href="https://datatables.net/reference/api/column().header()" rel="noreferrer">https://datatables.net/reference/api/column().header()</a> and followed it. But when I call table.cell() , it gives an error. </p>
  
  <pre><code>$('#example tbody').on( 'click', 'td', function () {
      var idx = table.cell( this ).index().column;
      var title = table.column( idx ).header();
  
      alert( 'Column title clicked on: '+$(title).html() );
   } );
  </code></pre>