Как разместить фильтр столбцов DataTables

Я использую последнюю версию jQuery DataTables. Я хочу использовать отдельный фильтр столбцов для каждой таблицы, поэтому использую плагин фильтра столбцов, но получаю окна поиска только в нижнем колонтитуле. Я хочу разместить в заголовке

    $(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" },

Как разместить его в верхней части таблицы?

Ответ 1

Метод 1 (CSS)

Вы можете изменить CSS на

tfoot {
    display: table-header-group;
}

Метод 2 (Javascript)

Поместите материал строки фильтра в THEAD как TD (не THs) и измените

$("tfoot input")

$("thead input")

Ответ 2

Вы можете переместить его в верхнюю часть таблицы, добавив параметр 'sPlaceHolder'

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

Ответ 3

Просто используйте следующий код javascript (здесь "пример" является идентификатором вашей таблицы):

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

Ответ 4

Используйте параметр sPlaceHolder:

sPlaceHolder: "head:before"

пример:

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

см. демо → http://jsfiddle.net/JNxj5/

Ответ 5

Попробуйте это

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

Ответ 6

В CSS вы можете использовать

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

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

Вы получите их расположение следующим образом:

tfoot
thead
tbody

Ответ 7

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

});