jQuery Datatables: объединение видимости столбца с фильтрами отдельных столбцов (ввод текста)?

Question

Я использую базовую видимость столбцов и поиск по отдельным столбцам (ввод текста) .

Проблема в том, что когда пользователь добавляет ранее скрытый столбец в таблицу, текстовое поле для этого столбца не появляется. Таким образом, пользователь не может отфильтровать этот столбец.

Кто-нибудь знает, как включить фильтры для скрытых столбцов? В идеале это не приведет к побочному результату очистки текста в других фильтрах (если пользователь вводит текст в других фильтрах).

Вот мой код фильтрации:

<script type="text/javascript">
$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#tableID tfoot th').each( function () {
        var title = $(this).text();

        if ((title != '') && !(title.includes("$"))) {
            // Then the current column is *not* the Action column.          
            $(this).html( '<span style="color: #515151; font-size:15px;"><i>Filter</i></span> <br> <input type="text"  style="margin-top:10px;" placeholder="'+title+'" /> ' );
        }
    } );

    var table = $('#tableID').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();
            }
        });
    } );

} );    
</script>  

Я использую эту строку, чтобы скрыть столбцы, которые я хочу скрыть от просмотра по умолчанию:

(table.column('.hideCol')).visible(false);

Answer 1

В DataTables есть пользовательское событие column-visibility. Таким образом, вы можете изменить видимость элементов <input> на основе текущего статуса столбца.

например. у вас есть <input> функция рендеринга, например:

//function to render input elements
const renderTfootInputs =  () => {
        //grab previous inputs into array
        const prevInputs = [];
        dataTable.columns().every(function(){
            prevInputs.splice(this.index(), 1, $(`#example tfoot [colindex="${this.index()}"]`).val());
        });
        //purge <tfoot> row contents
        $('#example tfoot tr').empty()
        //iterate through table columns
        dataTable.columns().every(function(){
            //if the column is visible
            this.visible() ?
            //append corresponding footer <input>
            $('#example tfoot tr').append(`<th><input colindex="${this.index()}" placeholder="${$(this.header()).text()}" value="${prevInputs[this.index()] || ''}"></input></th>`) :
            true;
        });
};

Затем вы можете вызвать его при изменении видимости столбца:

$('#example').on('column-visibility.dt', renderTfootInputs);

Полная демоверсия этого подхода может выглядеть следующим образом:

//sample data source
const dataSrc = [
	{id: 1, title: 'apple', cat: 'fruit'},
	{id: 2, title: 'pear', cat: 'fruit'},
	{id: 3, title: 'banana', cat: 'fruit'},
	{id: 4, title: 'carrot', cat: 'vegie'},
	{id: 5, title: 'eggplant', cat: 'vegie'}
];
//datatables initialization
const dataTable = $('#example').DataTable({
	data: dataSrc,
	dom: 'Bfrtip',
	buttons: ['colvis'],
	columns: ['id','title','cat'].map(header => ({title: header, data: header})),
	columnDefs: [
		{targets: 0, visible: false}
	]
});
//append blank footer to the table
$('#example').append('<tfoot><tr></tr></tfoot>');
//function to render input elements
const renderTfootInputs =  () => {
	//grab previous inputs into array
	const prevInputs = [];
	dataTable.columns().every(function(){
		prevInputs.splice(this.index(), 1, $(`#example tfoot [colindex="${this.index()}"]`).val());
	});
	//purge <tfoot> row contents
	$('#example tfoot tr').empty()
	//iterate through table columns
	dataTable.columns().every(function(){
		//if the column is visible
		this.visible() ?
		//append corresponding footer <input>
		$('#example tfoot tr').append(`<th><input colindex="${this.index()}" placeholder="${$(this.header()).text()}" value="${prevInputs[this.index()] || ''}"></input></th>`) :
		true;
	});
};
//initial call of above function
renderTfootInputs();
//call that function each time upon column visibility changes
$('#example').on('column-visibility.dt', renderTfootInputs);
//individual search
$('#example').on('keyup', 'tfoot input', function(event){
	dataTable.column($(event.target).attr('colindex')).search($(event.target).val()).draw();
});

tfoot input {
  display: block;
}

tfoot th {
  padding-left: 10px !important;
}

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
  <script type="application/javascript" src="test.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
</head>
	<body>
		<table id="example"></table>
	</body>
</html>