Jquery plugin DataTables filtre des colonnes individuelles sur le dessus?

Question

J'utilise cette API avec DataTables: http://www.sprymedia.co.uk/dataTables/example_multi_filter.html

Mais comment puis-je mettre les entrées de recherche au-dessus du tableau, à côté de "Rechercher toutes les colonnes" ??

Answer 1

Vous pouvez essayer avec CSS:

tfoot { 
    display: table-header-group; 
} 

Answer 2

Vous pouvez utiliser le filtre de colonne add-on pour DataTables. Il peut être configuré pour placer les filtres en dessous et au-dessus de la ligne de titre. Voir http://jquery-datatables-column-filter.googlecode.com/svn/trunk/dateRange.html, http://jquery-datatables-column-filter.googlecode.com/svn/trunk/numberRange.html et d'autres exemples sur le site.

Mise à jour rapide: Les deux URL ci-dessus ne sont pas valides maintenant. En voici un qui fonctionne: https://code.google.com/archive/p/jquery-datatables-column-filter/

Answer 3

Je sais que c'est très ancien. Mais nous pouvons achive cela en faisant ci-dessous des modifications à votre code jquery ...

$(document).ready(function() { 
$('#mytable thead td').each(function() { 
     var title = $('#mytable thead th').eq($(this).index()).text(); 
     $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
}); 
$("#mytable thead input").on('keyup change', function() { 
     table 
      .column($(this).parent().index()+':visible') 
      .search(this.value) 
      .draw(); 
}); 
}); 

Answer 4

filtrage de colonne Mettre sur le dessus (ou après la tête) dans Jquery Datatable:

<script src="~/Scripts/DataTables/jquery.dataTables.columnFilter.js"></script> 

TABLEAU

<table class="display table table-hover table-bordered" id="usersShops" width="100%"> 
    <thead> 
     <tr> 
      <th>Shop Name</th> 
      <th>User Name</th> 
      <th>Visit Date</th> 
      <th>IsVisited</th> 
      <th>IsAppdownloaded</th> 
     </tr> 
     <tr> 
      <th>ShopName</th> 
      <th>UserName</th> 
      <th>VisitDate</th> 
      <th></th> 
      <th></th> 
     </tr> 
    </thead>   
    <tbody></tbody> 
</table> 

Code modifié du filtre de colonne:

oTable.columnFilter({ 
       sPlaceHolder: "head:after", 
       aoColumns: [{ type: "text" }, 
          { type: "text" }, 
          { type: "date-range" } 
       ] 
      });