jQuery DataTable：在表头上单独搜索列 [英] jQuery DataTable : Individual column searching on table header

问题描述

我已按照

解决方案

这里解决方案为您的问题，请添加必要的数据式配置。

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

希望这可以帮助你。

I have followed the steps on Individual column searching (text inputs) and Individual column searching (select inputs) to use multiple filters on jQuery DataTable and there are multiple filters on the footer. On the other hand, I want to move these filters to the header of the DataTable, but cannot align them horizontally as displayed on the image below. There are some examples as Custom filtering - range search, but they are not aligned as well. Is it possible to do this?

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

解决方案

Here solution to your problem please add necessary things datatable configuration.

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

Hope this help you.

这篇关于jQuery DataTable：在表头上单独搜索列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！