title: filter table data based on drop down values of first column only in DataTables
body: <p>The functionality for select options for all the columns as mentioned on the website of data tables is mentioned below. How do i make it filter the table data on the drop down values of the first column only and also place the select drop down somewhere else rather than the usual header section.<a href="https://datatables.net/examples/api/multi_filter_select.html" rel="nofollow">see link for example</a></p>
  
  <pre><code>initComplete: function () {
      var api = this.api();
  
      api.column().indexes().flatten().each( function (i) {
          var column = api.column(i);
          var select = $('&lt;select&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt;').appendTo('$selectTriggerFilter').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;' )
          } );
      } );
  } 
  </code></pre>
  
  <p>I am using the following code . As soon as i remove the dom options the select options appear but not without dom.</p>
  
  <pre><code>$(document).ready(function() {
       $('#tableTrigger').DataTable({
  
      "lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
      searching: false,
      "scrollY": "200px",
      "dom": 'frtipS',
      "deferRender": true,
  
      initComplete: function () 
      {
          var api = this.api();
  
          api.columns().indexes().flatten().each( function ( i ) 
                  {
                              if(i == 0){ //Create just one SelectBox
                                  var select = $('&lt;select class='+i+'&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt;')
                                              .appendTo( '#selectTriggerFilter')
                                              .on( 'change', function () {
  
                                          var val = $(this).val();
                                          column( i ).search( val ? '^'+$(this).val()+'$' : val, true, false ).draw();
                                      });
  
                                  column( i ).data().unique().sort().each( function ( d, j ) {
                                      select.append( '&lt;option value="'+d+'"&gt;'+d+'&lt;/option&gt;' );
                                  } );
                          }
                              else return;
                 });
      } 
  
    }); 
  });
  </code></pre>