title: datatables column search boxes not showing
body: <p>Datatable used is version 1.10.12</p>
  
  <p>I would assume following to work, but it does not. I mean everything else works except the search fields, they do not show up. JSON data is obtained from server to draw the table.</p>
  
  <p>here is the HTML:</p>
  
  <pre><code>&lt;span&gt;
      &lt;table name="item" id="item" class="display" width="100%" cellspacing="0"&gt;
      &lt;/table&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>$(document).ready(function(){
      //#################  initial table draw
      var oTable;     //global
      var rowIndexGlobal = 0;
      var colIndexGlobal = 0;
  
      $.getJSON( "item.pl?Action=getlist", function( data ) {
          var dataSet = [];
          $.each( data, function( key, val ) {
          dataSet.push(val);
          });
  
          oTable = $('#item').DataTable({
              data: dataSet,          
              columns: [
                  { title: "ID" },
                  { title: "Item" },
                  { title: "Inventory" },
                  { title: "Price" },
                  { title: "Sale" },
              ],
              "fnInitComplete": function() {
                  $('#item tbody tr').each(function(){
                          $(this).find('td:eq(3)').attr('nowrap', 'nowrap');      //making text to NOT-wrap.
                  });
                  $("#datatables4_wrapper").css("width","100%");
                  //this did not work so i have commented out
                  /*var r = $('#item tfoot tr');
                  r.find('th').each(function(){
                      $(this).css('padding', 8);
                  });
                  $('#item thead').append(r);
                  $('#search_0').css('text-align', 'center');*/
              },
              "bAutoWidth": false
          });
          // Sort by columns 1 and 9 and redraw &lt;- it works, but search does not....
          oTable
              .order( [ 1, 'asc' ], [ 9, 'asc' ] )
              .draw()
              .columns().every( function () {
                  var that = this;
                  $( 'input', this.footer() ).on( 'keyup change', function () {
                      if ( that.search() !== this.value ) {
                          that
                              .search( this.value )
                              .draw();
                      }
                  });
              });
      });
  });
  </code></pre>
  
  <p>I also want to have these search boxes under headers, as first row of the table....</p>
  
  <p>this code comes from site, why does it not work?</p>