datatable js 按列筛选_javascript – jQuery DataTable：在表头上搜索单个列

我已按照

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( '' );

} );

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

}

} );

} );

} );