FixedHeaderでDataTablesの列フィルタが失敗する

Question

私は、テキスト入力を使用して個々の列をフィルタリングしたDataTablesテーブルを持っています。フィルターはうまくいきました。しかし、FixedHeaderプラグインと組み合わせると、問題が発生しています。下にスクロールしてヘッダーが固定されると、フィルターは機能しなくなります。あなたはまだそれらを見ることができ、それらに入力することができます、彼らはただ何もしません。違いがあるのか​​どうかはわかりませんが、ヘッダーにフィルターが追加されているので、テーブルの上部に表示されます。

私はちょうどここで何かが分かりにくいと思っています。参考に追加コードが必要な場合は、私にお知らせください。どんな助けでも大歓迎です。

のDataTableスクリプト

$(document).ready(function() { 

$("#HCView tfoot tr").clone().appendTo($("#HCView thead")).find("th").each(function (i) { 
    var title = $('#HCView thead th').eq($(this).index()).text(); 
    $(this).html('<input type="text" class="HCViewSearch" data-index="'+i+'" />'); 
}); 


// DataTable 
var table = $('#HCView').DataTable({ 
    paging:   false, 
    ordering:  false, 
    scrollX:  false, 
    sScrollX:  false, 
}); 

new $.fn.dataTable.FixedHeader(table, { 
// options 
}); 

// Filter event handler 
$(table.table().container()).on('keyup', 'thead input', function() { 
    table 
     .column($(this).data('index')) 
     .search(this.value) 
     .draw(); 
}); 

$("#HCView_info").appendTo("#tableControls"); 

}); 

Answer 1

固定ヘッダ要素がtable().container() APIメソッドによって参照される要素の外側に配置されるので、これが起こります。

Individual column searching (text inputs)ページに示されている方法を使用します。

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

var table = $('#example').DataTable({ 
    ordering: false, 
    fixedHeader: true 
}); 

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

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

コードとデモンストレーションについては、this exampleを参照してください。