title: Set autofocus on Datatable - $.focus() not making changes
body: <p>I would like to set the autofocus to the first select input at the table. However, cause the select input gets created by DataTables I have to call the jQuery function after the select input and the table got rendered by DataTables. I am trying to to this with <code>$("#autofocus_on_load").focus()</code>. But it isn't making any changes or at least focusing the select input..</p>
  
  <p>How can that be? - You guys have any solutions for this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var table;
  
  $(document).ready(function() {
    table = $('#assignment_overview_table').DataTable( {
      "displayStart": 0,
      "language": {
        "url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/German.json"
      },
      "processing": true,
      "pageLength": 100,
      "bSortCellsTop": true,
      "fixedHeader": true,
      initComplete: function () {
        this.api().columns().every( function () {
          var column = this;
          var select = $('&lt;select&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt;');
          select.appendTo( $(column.header()).empty() )
  
          select.on( 'click', function(e) {
            e.stopPropagation();
          } );
  
  
          select.on( 'change', function () {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );
  
            column
              .search( val ? '^'+val+'$' : '', true, false )
              .draw();
          } );
  
          column.data().unique().sort().each( function ( d, j ) {
            select.append( '&lt;option value="'+d+'"&gt;'+d+'&lt;/option&gt;' )
          } );
        } );
      },
    });
  
    table.on('draw', function () {
      table.columns().indexes().each( function ( idx ) {
        var select = $(table.column( idx ).header()).find('select');
  
        if ( select.val() === '' ) {
          select
            .empty()
            .append('&lt;option value=""/&gt;');
  
          table.column(idx, {search:'applied'}).data().unique().sort().each( function ( d, j ) {
            select.append( '&lt;option value="'+d+'"&gt;'+d+'&lt;/option&gt;' );
          } );
        }
      } );
    } );
  
  
    $("#autofocus_on_load &gt; select").focus();
  } );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.1.0.js"&gt;&lt;/script&gt;&lt;script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"&gt;&lt;/script&gt;
  
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"&gt;
  
  &lt;table class="table table-striped table-bordered" id="assignment_overview_table"&gt;
  &lt;thead&gt;
        &lt;tr&gt;
          &lt;th id="autofocus_on_load"&gt;ID&lt;/th&gt;
          &lt;th&gt;NAME&lt;/th&gt;
          &lt;th&gt;SURNAME&lt;/th&gt;
          &lt;th&gt;CASTE&lt;/th&gt;
          &lt;th&gt;EXTRA&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;ID&lt;/th&gt;
          &lt;th&gt;NAME&lt;/th&gt;
          &lt;th&gt;SURNAME&lt;/th&gt;
          &lt;th&gt;CASTE&lt;/th&gt;
          &lt;th&gt;EXTRA&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;3&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;4&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;5&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
        &lt;td&gt;xyz&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Kind regards and Thank You!</p>