jQuery datatables服务器端-过滤器列在顶部 [英] jquery datatables server side - filter column on top

问题描述

您好，我需要将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();
        } );
    } );

我的DataTables使用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;
}

有任何建议吗？

推荐答案

解决方案

• 在 thead 中添加额外的行


• 使用 orderCellsTop 指示插件使用顶部行进行排序。


• 使用下面的代码创建过滤器并附加事件处理程序。



SOLUTION

• 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.

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




DEMO




请参见此jsFiddle 用于代码和演示。

这篇关于jQuery datatables服务器端-过滤器列在顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！