Le filtre de colonne DataTables échoue avec FixedHeader

Question

J'ai une table DataTables avec un filtrage de colonne individuel à l'aide de la saisie de texte. Les filtres fonctionnaient très bien. Cependant, lorsqu'il est combiné avec le plugin FixedHeader, j'ai des problèmes. Lorsque je défile vers le bas et que les en-têtes deviennent fixes, les filtres ne fonctionnent plus. Vous pouvez toujours les voir et les taper, ils ne font rien. Je ne sais pas si cela fait une différence, mais j'ai les filtres ajoutés à l'en-tête afin que vous puissiez les voir en haut de la table. J'espère que je manque quelque chose d'évident ici. Si le code supplémentaire est nécessaire pour la référence, laissez-moi savoir s'il vous plaît. Toute aide est la bienvenue.

DataTables Script

$(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

Cela se produit parce que l'élément d'en-tête fixe est situé à l'extérieur de l'élément visé par table().container() méthode API.

Je voudrais utiliser la méthode démontrée sur la page 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(); 
     } 
    }); 
}); 

Voir this example pour le code et la démonstration.