javascript - jQuery 数据表 : Individual column searching on table header

Question

我已按照 Individual column searching (text inputs) 上的步骤操作和 Individual column searching (select inputs)在 jQuery DataTable 上使用多个过滤器页脚上有多个过滤器。另一方面，我想将这些过滤器移动到 DataTable 的标题，但无法水平对齐它们，如下图所示。有一些例子，如 Custom filtering - range search ，但它们也没有对齐。是否有可能做到这一点？

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

Answer 1

这里是解决方案，请添加必要的数据表配置。

使用 CSS 将列过滤器从页脚移动到表头，即仅使用

<style>
tfoot {
     display: table-header-group;
}
</style>

https://jsfiddle.net/dipakthoke07/ehhfsrfq/2/

希望对你有帮助。