如何将DataTables的列过滤器置于顶部

Question

我正在使用 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" },

我该如何把它放在我的桌子顶部？

- coder

Answer 1

方法一（CSS）

您可以更改CSS为

tfoot {
    display: table-header-group;
}

方法二（Javascript）

将筛选行的内容放入THEAD中作为TD（而非TH），并进行更改。

$("tfoot input")

到

$("thead input")

- asprin

---

谢谢您的回复，但很抱歉我没有理解第二种方法...您能否简要解释一下？ - coder

你可以使用最简单的方法1。http://datatables.net/release-datatables/examples/api/multi_filter.html将告诉你更多关于方法2的内容。 - asprin

CSS - 好的建议，简单而有效。谢谢。 - Makita

@asprin - 超棒！谢谢！ - TSV

它在Chrome和Firefox中工作，但在IE中不工作。注意！ - Venkat Prasanna

Answer 2

通过添加参数“sPlaceHolder”，您可以将其移动到表格顶部。

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

- buzkall

Answer 3

只需使用以下Javascript代码（这里的“example”是您表格的ID）：

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

- Abhijit

---

这帮助我解决了问题。 - undefined

Answer 4

在CSS中，你可以使用

display: table-header-group; //在tfoot上

以及

display: table-row-group; //在thead上

它们的位置会像这样：

tfoot
thead
tbody

- mary1

---

我有一个相关的问题，只是我想要'thead'在顶部，'tfoot'紧接着它，在其下方，其余的行在其后。由于'thead'已经在HTML的顶部，'tfoot'紧随其后，所以在'tfoot'元素上设置'display: table-row-group'就可以正常显示了。现在在Chrome和IE10上正确显示。 - EdwinW

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

- Antony

Answer 6

使用sPlaceHolder选项：

sPlaceHolder: "head:before"

例子：

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

请查看演示 -> http://jsfiddle.net/JNxj5/

- davidkonrad

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

} );

- shashidhar

---

请编辑您的回答以解释如何解决 OP 的问题，并解释代码的功能。在 Stack Overflow 上，只提供代码的答案是不鼓励的。谢谢！ - Tim Malone

Answer 8

你应该使用： this.footer() 替换为 this.header()。

- Anubhav Aggarwal

---

你的回答可以通过添加更多关于代码的信息以及它如何帮助提问者来改进。 - Tyler2P