Comment placer les tables de données de la colonne de filtre sur le dessus

Je suis à l'aide de jQuery DataTables dernière version. Je veux utiliser la colonne de filtre sur chaque table afin d'am à l'aide de la colonne de filtre de plugin, mais je reçois des champs de recherche dans le pied de page uniquement. 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": '<"top"if>rt<"bottom"lp><"clear">'

    }).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?

InformationsquelleAutor coder | 2013-07-13

datatables jquery

37

Méthode 1 (CSS)

Vous pouvez modifier le CSS pour
```
tfoot {
    display: table-header-group;
}
```
Méthode 2 (Javascript)

Mettre la ligne de filtre des trucs dans le THEAD TDs (pas de Sat) et le changement de
```
$("tfoot input")
```
à
```
$("thead input")
```
- merci pour votre réponse, mais je suis désolé suis pas 2ème méthode..u peut expliquer brièvement..
- Vous pouvez utiliser la méthode 1 qui est le plus simple. datatables.net/release-datatables/examples/api/... vous en dire plus sur la méthode 2
- iam à l'aide de css,mais ça ne fonctionne pas..
- long piocher nuit.. jamais pensé à css... a fonctionné comme un charme...
- Content que ça vous a aidé
- CSS - grande idée, simple et efficace. Merci.
- Grâce Makita 🙂
- super! Merci!
- Vous êtes les bienvenus!
- Ceci est utile datatables.net/examples/api/multi_filter_select.html
- css a fonctionné pour moi. génial!!
- Son travail dans chrome et firefox mais pas sous IE..au Courant!
InformationsquelleAutor asprin
16

Vous pouvez déplacer vers le haut de votre tableau en ajoutant le paramètre "sPlaceHolder'
```
}).columnFilter({
    sPlaceHolder: "head:after",
    aoColumns: [ ...
```
InformationsquelleAutor buzkall
10

Utilisez simplement le code javascript suivant ( ici, 'exemple' étant l'id de votre table ):

JS:
```
$('#example tfoot tr').insertAfter($('#example thead tr'))
```
InformationsquelleAutor Abhijit
10

En CSS, vous pouvez utiliser

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

et

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

Vous obtiendrez leur positionné comme ceci:
```
tfoot
thead
tbody
```
- J'ai eu un problème connexe, sauf que j'ai voulu "thead' sur le haut, 'tfoot" juste en dessous, et le reste des lignes par la suite. Depuis thead "était déjà en haut de l'HTML, et" pied de page " juste après elle, la mise en 'display: table-row-group "sur le" pied de page " élément a très bien fonctionné. Il s'affiche désormais correctement sur Chrome et IE10.
InformationsquelleAutor mary1

Essayer cette

$(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();
});
});

Merci .. Vous avez sauvé mon temps 🙂

InformationsquelleAutor Antony

Utiliser le sPlaceHolder option :

sPlaceHolder: "head:before"

exemple :

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

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

InformationsquelleAutor davidkonrad

  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( '<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();
        }
    } );
} );

} );

Merci de modifier votre réponse à expliquer comment cela résout le cas des OP problème, et d'expliquer ce que fait le code. Code seulement les réponses sont découragés sur DONC. Merci!

InformationsquelleAutor shashidhar

Vous devez vous connecter pour publier un commentaire.

Méthode 1 (CSS)

Méthode 2 (Javascript)