web-dev-qa-db-fra.com

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, alors j'utilise le plug-in de filtre de colonne, mais je reçois les zones 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?

jquerydatatables
18
coder

Méthode 1 (CSS)

Vous pouvez changer le CSS en

tfoot {
    display: table-header-group;
}

Méthode 2 (Javascript)

Mettez le truc de la ligne de filtre dans THEAD en tant que TDs (pas THs) et changez

$("tfoot input")

à

$("thead input")
37
asprin

Vous pouvez le déplacer en haut de votre tableau en ajoutant le paramètre 'sPlaceHolder'

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

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

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

En CSS, vous pouvez utiliser

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

et

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

Vous les positionnerez comme ceci:

tfoot
thead
tbody
10
mary1

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/

5
davidkonrad

Essaye ça

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

});

1
shashidhar