How to show Jquery Datatable Individual column searching (select inputs) at the top of the table header

How to show Jquery Datatable Individual column searching (select inputs) at the top of the table header

Dear All,

I had the below code where filters are working fine for html table. But I required it to show on top.
I had replaced the    .appendTo( $(column.footer ()).empty() ) to   .appendTo( $(column.header()).empty() ) .But my table headers are going down . I required dropdowns on top my table headers

can any one please help me how can I do it.

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  7. <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  8. <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  9. <script>
  10. $(document).ready(function() {
  11.     $('#example').DataTable( {
  12.         initComplete: function () {
  13.             this.api().columns().every( function () {
  14.                 var column = this;
  15.                 var select = $('<select><option value=""></option></select>')
  16.                     .appendTo( $(column.header()).empty() )
  17.                     .on( 'change', function () {
  18.                         var val = $.fn.dataTable.util.escapeRegex(
  19.                             $(this).val()
  20.                         );
  21.                         column
  22.                             .search( val ? '^'+val+'$' : '', true, false )
  23.                             .draw();
  24.                     } );
  25.                  column.data().unique().sort().each( function ( d, j ) {
  26.                     select.append( '<option value="'+d+'">'+d+'</option>' )
  27.                 } );
  28.             } );
  29.         }
  30.     } );
  31. } );
  32. </script>
  33. </head>
  34. <body>
  35. <table id="example" class="display" style="width:100%">
  36.         <thead>
  37.             <tr>
  38.                 <th>Name</th>
  39.                 <th>Position</th>
  40.                 <th>Office</th>
  41.                 <th>Age</th>
  42.                 <th>Start date</th>
  43.                 <th>Salary</th>
  44.             </tr>
  45.         </thead>
  46.         <tbody>
  47.             <tr>
  48.                 <td>Tiger Nixon</td>
  49.                 <td>System Architect</td>
  50.                 <td>Edinburgh</td>
  51.                 <td>61</td>
  52.                 <td>2011/04/25</td>
  53.                 <td>$320,800</td>
  54.             </tr>
  55.             <tr>
  56.                 <td>Garrett Winters</td>
  57.                 <td>Accountant</td>
  58.                 <td>Tokyo</td>
  59.                 <td>63</td>
  60.                 <td>2011/07/25</td>
  61.                 <td>$170,750</td>
  62.             </tr>
  63.             <tr>
  64.                 <td>Ashton Cox</td>
  65.                 <td>Junior Technical Author</td>
  66.                 <td>San Francisco</td>
  67.                 <td>66</td>
  68.                 <td>2009/01/12</td>
  69.                 <td>$86,000</td>
  70.             </tr>
  71.             <tr>
  72.                 <td>Cedric Kelly</td>
  73.                 <td>Senior Javascript Developer</td>
  74.                 <td>Edinburgh</td>
  75.                 <td>22</td>
  76.                 <td>2012/03/29</td>
  77.                 <td>$433,060</td>
  78.             </tr>
  79.             <tr>
  80.                 <td>Airi Satou</td>
  81.                 <td>Accountant</td>
  82.                 <td>Tokyo</td>
  83.                 <td>33</td>
  84.                 <td>2008/11/28</td>
  85.                 <td>$162,700</td>
  86.             </tr>
  87.             <tr>
  88.                 <td>Brielle Williamson</td>
  89.                 <td>Integration Specialist</td>
  90.                 <td>New York</td>
  91.                 <td>61</td>
  92.                 <td>2012/12/02</td>
  93.                 <td>$372,000</td>
  94.             </tr>
  95.              
  96.         </tbody>
  97.         <tfoot>
  98.             <tr>
  99.                 <th>Name</th>
  100.                 <th>Position</th>
  101.                 <th>Office</th>
  102.                 <th>Age</th>
  103.                 <th>Start date</th>
  104.                 <th>Salary</th>
  105.             </tr>
  106.         </tfoot>
  107.     </table>
  108. </body>
  109. </html>


Srk