title: Adding individual column search on seprate row
body: <p>I want to add text boxes to search my datatables (which i have done) but the position of them is in the same <code>&lt;Tr&gt;</code> as my row titles.</p>
  
  <p>As you can see here:</p>
  
  <p><a href="https://i.stack.imgur.com/Mirjl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mirjl.png" alt="enter image description here"></a></p>
  
  <p>But I want to make the inputs go on the seperate row so they're split like so:</p>
  
  <p><a href="https://i.stack.imgur.com/p22Zq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p22Zq.png" alt="enter image description here"></a></p>
  
  <p>My code:</p>
  
  <pre><code>if (!$.fn.DataTable.isDataTable('.table')) {
      $('.table thead th').each( function (i) {
          var title = $('.table thead th').eq( $(this).index() ).text();
          $(this).after('&lt;input type="text" placeholder="Search '+title+'" data-index="'+i+'" /&gt;' );
      } );
  
      var table = $('.table').DataTable( {
          paging:         false
      } );
  
  
      $( table.table().container() ).on( 'keyup', 'thead input', function () {
          table
              .column( $(this).data('index') )
              .search( this.value )
              .draw();
      } );
  }
  </code></pre>
  
  <p>How can I achieve this?</p>