如何将DataTables列过滤器置于顶部
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将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" ,
我怎样才能把它放在桌子的顶部？
答案
Method 1 (CSS)
您可以将CSS更改为
tfoot
display: table-header-group;
Method 2 (javascript)
将滤波器行的东西放入THEAD作为TD（而不是TH）并更改
$("tfoot input")
至
$("thead input")
另一答案
您可以通过添加参数'sPlaceHolder'将其移动到表格的顶部
).columnFilter(
sPlaceHolder: "head:after",
aoColumns: [ ...
另一答案
只需使用以下javascript代码（此处'example'是您的表的id）：
$('#example tfoot tr').insertAfter($('#example thead tr'))另一答案
在CSS中你可以使用
display: table-header-group; //on tfoot
和
display: table-row-group; //on thead
你会得到这样的定位：
tfoot
thead
tbody
另一答案
试试这个
$(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();
);
);
另一答案
使用sPlaceHolder选项：
sPlaceHolder: "head:before"
例如：
dataTable.columnFilter(
sPlaceHolder: "head:before",
aoColumns: [
type: "select" ,
type: "select" ,
type: "select" ,
type: "select" ,
type: "select"
]
);
看演示 - > http://jsfiddle.net/JNxj5/
另一答案
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();
);
);
);
以上是关于如何将DataTables列过滤器置于顶部的主要内容，如果未能解决你的问题，请参考以下文章