jquery 数据表服务器端 - 顶部过滤列 [英] jquery datatables server side - filter column on top
本文介绍了jquery 数据表服务器端 - 顶部过滤列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
您好,我需要将 JQUERY DATATABLES 1.10.10 上的过滤器列移到顶部我在底部有过滤器列:
Hello I need to move on the top the filter column on my JQUERY DATATABLES 1.10.10 I have the filter column on the bottom:
$("dtabledID thead th").each( function () {
var title = $(this).text();
$(this).html( "<input type="text" placeholder="Search "+title+"" />" );
} );
经典之作:
// Apply the search column filters
table.columns().eq( 0 ).each( function ( colIdx ) {
$( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
table
.column( colIdx )
.search( this.value )
.draw();
} );
} );
我的数据表使用 scrollX 和 scroolY 函数......并且内容生成服务器端,并且一切正常......过滤器也是如此.
My DataTables use scrollX and scroolY function...and the content is generate server-side, and all work correctly ..the filter too.
我需要将过滤器移到标题(TH 和 THEAD)的顶部(之后或之前)
I have need to move the filter on top (after or berfore) the Title (TH and THEAD)
我尝试了很多方法都没有成功,例如:
I have try many solutions without success, for example :
在 THEAD 中添加 TD 列不起作用
<thead>
<tr><th>col1</th><th>col2</th></tr>
<tr><td>col1</td><td>col2<</td></tr>
</thead>
$(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();
});
});
CSS 解决方案:不起作用
tfoot {
display: table-header-group;
}
有什么建议吗?
推荐答案
SOLUTION
- 在
thead
中为具有相同列数的搜索过滤器添加额外的行. - 使用
orderCellsTop
指示插件使用顶行进行排序. - 使用下面的代码创建过滤器并附加事件处理程序.
- Add extra row in
thead
for search filters with the same amount of columns. - Use
orderCellsTop
to instruct plugin to use top row for sorting. - Use the code below to create filters and attach event handler.
SOLUTION
// Setup - add a text input to each header cell
$('#example thead tr:eq(1) th').each( function () {
var title = $('#example thead tr:eq(0) th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
var table = $('#example').DataTable({
orderCellsTop: true
});
// Apply the search
table.columns().every(function (index) {
$('#example thead tr:eq(1) th:eq(' + index + ') input').on('keyup change', function () {
table.column($(this).parent().index() + ':visible')
.search(this.value)
.draw();
});
});
演示
有关代码和演示,请参阅此 jsFiddle.
这篇关于jquery 数据表服务器端 - 顶部过滤列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文