jQuery DataTable：テーブルヘッダーで個別の列を検索

Question

jQuery DataTableで複数のフィルターを使用する場合は、Individual column searching (text inputs)とIndividual column searching (select inputs)の手順を実行し、フッターに複数のフィルターがあります。一方、私はこれらのフィルタをDataTableのヘッダに移動したいが、下の画像に表示されているように水平に並べることはできない。 Custom filtering - range searchというようにいくつかの例がありますが、それらも整列していません。これは可能ですか？

$(document).ready(function() { 
    // Setup - add a text input to each footer cell 
    $('#example tfoot th').each(function() { 
     var title = $(this).text(); 
     $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
    }); 

    // DataTable 
    var table = $('#example').DataTable(); 

    // Apply the search 
    table.columns().every(function() { 
     var that = this; 

     $('input', this.footer()).on('keyup change', function() { 
      if (that.search() !== this.value) { 
       that 
        .search(this.value) 
        .draw(); 
      } 
     }); 
    }); 
}); 

Answer 1

ここsolution問題へのDataTableの構成に必要なものを追加してください。

列フィルタは、ちょうど

<style> 
tfoot { 
    display: table-header-group; 
} 
</style> 

https://jsfiddle.net/dipakthoke07/ehhfsrfq/2/

・ホープこのヘルプあなたを使用することにより、すなわち、CSSを使って、テーブルのヘッダーにフッターから移動されます。