jQuery 如何将 DataTables 列过滤器放在顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17629060/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to place DataTables column filter on top
提问by coder
I am using jQuery DataTables latest version. I want to use individual column filter on every table so am using the column filter plugin but am getting search boxes in footer only. I want to place in the header
我正在使用 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" },
How can I place it on the top of my table?
我怎样才能把它放在桌子的顶部？
回答by asprin
Method 1 (CSS)
方法一（CSS）
You could change the CSS to
您可以将 CSS 更改为
tfoot {
display: table-header-group;
}
Method 2 (Javascript)
方法 2 (Javascript)
Put the filter row stuff into the THEAD as TDs (not THs) and change
将过滤器行的内容作为 TD（而不是 TH）放入 THEAD 并更改
$("tfoot input")
to
到
$("thead input")
回答by buzkall
You can move it to the top of your table by adding the parameter 'sPlaceHolder'
您可以通过添加参数“sPlaceHolder”将其移动到表格的顶部
}).columnFilter({
sPlaceHolder: "head:after",
aoColumns: [ ...
回答by Abhijit
Simply use the following javascript code ( here 'example' being the id of your table ):
只需使用以下 javascript 代码（此处的“示例”是您的表的 ID）：
$('#example tfoot tr').insertAfter($('#example thead tr'))回答by mary1
In CSS you can use
在 CSS 中，您可以使用
display: table-header-group; //on tfoot
display: table-header-group; //on tfoot
and
和
display: table-row-group; //on thead
display: table-row-group; //on thead
You'll get them positioned like this:
你会像这样定位它们：
tfoot
thead
tbody
回答by Antony
Try this
尝试这个
$(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();
});
});
回答by davidkonrad
Use the sPlaceHolderoption :
使用sPlaceHolder选项：
sPlaceHolder: "head:before"
example :
例子 ：
dataTable.columnFilter({
sPlaceHolder: "head:before",
aoColumns: [
{ type: "select" },
{ type: "select" },
{ type: "select" },
{ type: "select" },
{ type: "select" }
]
});
see demo -> http://jsfiddle.net/JNxj5/
看演示 -> http://jsfiddle.net/JNxj5/
回答by shashidhar
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();
}
} );
} );
} );
});
