jQuery DataTable: индивидуальный поиск столбцов в заголовке таблицы

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

Здесь solution к вашей проблеме, пожалуйста, добавьте необходимые вещи DataTable конфигурацию.

фильтр Колонны перемещается из колонтитула заголовка таблицы с помощью CSS, то есть только с помощью

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

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

Надеются, что это поможет вам.