title: Is it possible to display the input field below the header in the datatables?
body: <p>I am using the data tables. Is it possible to display the input field below the header?</p>
  <p>I tried the below code but I am getting all the input fields in the single <code>tr</code></p>
  <p>Please check the screenshot
  <a href="https://i.stack.imgur.com/NI8s2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NI8s2.png" alt="enter image description here" /></a></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>$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example thead tr').clone(true).appendTo('#example thead');
  
    var html = '&lt;tr&gt;&lt;th&gt;&lt;input type="text" placeholder="Search Name" name="name"&gt;&lt;/th&gt;&lt;th&gt;&lt;input type="text" placeholder="Search Position" name="position"&gt;&lt;/th&gt;&lt;th&gt;&lt;input type="text" placeholder="Search Office" name="office"&gt;&lt;/th&gt;&lt;th&gt;&lt;input type="text" placeholder="Search Age" name="age"&gt;&lt;/th&gt;&lt;th&gt;&lt;input type="text" placeholder="Search Start date" name="date"&gt;&lt;/th&gt;&lt;th&gt;&lt;input type="submit" name="submit" value="Submit"&gt;&lt;/th&gt;&lt;/tr&gt;';
    $('#example thead tr:eq(1) th').append(html);
  
    var table = $('#example').DataTable({
      orderCellsTop: true,
      fixedHeader: true
    });
  
    $('input[type="submit"]').click(function() {
      var data = table.$('input').serialize();
      alert("The following data would have been submitted to the server: \n\n");
      return false;
    });
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css"&gt;
  &lt;div class="container"&gt;
    &lt;table id="example" class="table table-striped" style="width:100%"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Position&lt;/th&gt;
          &lt;th&gt;Office&lt;/th&gt;
          &lt;th&gt;Age&lt;/th&gt;
          &lt;th&gt;Start date&lt;/th&gt;
          &lt;th&gt;Salary&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;Tiger Nixon&lt;/td&gt;
          &lt;td&gt;System Architect&lt;/td&gt;
          &lt;td&gt;Edinburgh&lt;/td&gt;
          &lt;td&gt;61&lt;/td&gt;
          &lt;td&gt;2011/04/25&lt;/td&gt;
          &lt;td&gt;$320,800&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Garrett Winters&lt;/td&gt;
          &lt;td&gt;Accountant&lt;/td&gt;
          &lt;td&gt;Tokyo&lt;/td&gt;
          &lt;td&gt;63&lt;/td&gt;
          &lt;td&gt;2011/07/25&lt;/td&gt;
          &lt;td&gt;$170,750&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Ashton Cox&lt;/td&gt;
          &lt;td&gt;Junior Technical Author&lt;/td&gt;
          &lt;td&gt;San Francisco&lt;/td&gt;
          &lt;td&gt;66&lt;/td&gt;
          &lt;td&gt;2009/01/12&lt;/td&gt;
          &lt;td&gt;$86,000&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Michael Bruce&lt;/td&gt;
          &lt;td&gt;Javascript Developer&lt;/td&gt;
          &lt;td&gt;Singapore&lt;/td&gt;
          &lt;td&gt;29&lt;/td&gt;
          &lt;td&gt;2011/06/27&lt;/td&gt;
          &lt;td&gt;$183,000&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Donna Snider&lt;/td&gt;
          &lt;td&gt;Customer Support&lt;/td&gt;
          &lt;td&gt;New York&lt;/td&gt;
          &lt;td&gt;27&lt;/td&gt;
          &lt;td&gt;2011/01/25&lt;/td&gt;
          &lt;td&gt;$112,000&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
  
    &lt;/table&gt;
  
  &lt;/div&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>