jQuery Girl
  1. jQuery Girl
  3. Comment placer le filtre de colonne DataTables sur le dessus
Intereting Posts
Utilisation de l’événement de mutation DOMSubtreeModified. dans jQuery jquery $ (‘. class’). each () combien d’éléments? jQuery chaque tr.children n’est pas défini dans Firefox 3.0 Comment sérialiser plusieurs listes avec JQuery Espace de noms fn jQuery coulisses de largeur fixe avec carrousel lisse En utilisant django-froala-editor, l’éditeur fonctionne dans la page admin ne fonctionne pas dans la page post? ‘jQuery.getJSON’ ne fonctionne pas dans Internet Explorer 8 glisser plusieurs éléments sur clic simuler un «clic et maintien pendant 5 secondes» sur un élément avec jquery jquery checkbox check à l’aide de tableaux Obtenir du texte dans un élément excluant les descendants JQUERY copie le contenu d’une zone de texte dans un champ lors de la frappe Accéder aux données d’un DataTable à partir d’un clic de bouton dans une ligne Pourquoi les graphiques Google ne sont-ils pas chargés tant que je n’ai pas actualisé

Comment placer le filtre de colonne DataTables sur le dessus

J’utilise la dernière version de jQuery DataTables. Je veux utiliser un filtre de colonne individuel sur chaque table, j’utilise donc le plug-in de filtre de colonne, mais les champs de recherche ne s’affichent qu’en bas de page. Je veux placer dans l’en-tête 

$(document).ready(function () { var oTable=$("#example").dataTable({ "bJQueryUI": true, "sScrollX": "100%", "aLengthMenu": [[5, 15, 50, 100], [5, 15, 50, "l00"]], "iDisplayLength": 10, "sPaginationType": "full_numbers", "sDom": 'rt' }).columnFilter({"sPlaceHolder":"head :before", "aoColumns": [{ "type": "text" }, { "type": "text" }, null, null, null, null, { "type": "text" }, null, { "type": "text" }, { "type": "text" }, { "type": "text" },

Comment puis-je le placer sur le dessus de ma table?

Méthode 1 (CSS)

Vous pouvez changer le CSS en 

 tfoot { display: table-header-group; }

Méthode 2 (Javascript)

Placez le contenu de la ligne de filtre dans le THEAD en tant que TD (pas de TH) et modifiez-le. 

 $("tfoot input")

à 

 $("thead input")

Vous pouvez le déplacer en haut de votre table en ajoutant le paramètre ‘sPlaceHolder’ 

 }).columnFilter({ sPlaceHolder: "head:after", aoColumns: [ ...

Utilisez simplement le code javascript suivant (ici “exemple” étant l’identifiant de votre table): 

 $('#example tfoot tr').insertAfter($('#example thead tr'))

En CSS, vous pouvez utiliser

display: table-header-group; //on tfoot

et

display: table-row-group; //on thead

Vous les aurez positionnés comme ceci: 

 tfoot thead tbody

Utilisez l’option sPlaceHolder : 

 sPlaceHolder: "head:before"

Exemple : 

 dataTable.columnFilter({ sPlaceHolder: "head:before", aoColumns: [ { type: "select" }, { type: "select" }, { type: "select" }, { type: "select" }, { type: "select" } ] });

voir la démo -> http://jsfiddle.net/JNxj5/

Essaye ça 

 $(document).ready(function() { $('#mytable thead td').each( function () { var title = $('#mytable thead th').eq( $(this).index() ).text(); $(this).html( '' ); }); $("#mytable thead input").on( 'keyup change', function () { table .column( $(this).parent().index()+':visible' ) .search( this.value ) .draw(); }); }); 
  CSS: tfoot input { width: 100%; padding: 3px; box-sizing: border-box; } tfoot { display: table-header-group;} Script: $(document).ready(function() { // Setup - add a text input to each footer cell $('#example tfoot th').each( function () { var title = $(this).text(); $(this).html( '' ); } ); // 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(); } } ); } );

});