Функциональность фильтрации текстового поля с данными - необходимо, чтобы входные данные фильтра оставались видимыми для пользователей, и они не знают, как это сделать

Question

У меня есть следующий скрипт для фильтрации данных в моей таблице данных, среди прочего. Я пытаюсь изменить этот код, чтобы текстовые поля фильтра в конце каждого столбца сохраняли любое введенное значение фильтра. Обратите внимание, я использую stateSave. Проблема в том, что даже если результат фильтра остается неизменным, будет действительно здорово, если кто-то сможет увидеть, какие фильтры они применили. Как я могу исправить приведенный ниже сценарий, чтобы это произошло?

Изображение фильтра текстового поля четкое, даже если фильтр применен. Хотите, чтобы фильтр отображался здесь:

$(document).ready(function() {

    // Setup - add a text input to each footer cell
    $('#studentview tfoot th').not(":eq(0)") //Exclude columns 1
                          .each( function () {
        var title = $('#studentview thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" id="textboxsize" placeholder="Search '+title+'" />' );
    });

    var table = $('#studentview').DataTable({
        stateSave: true,
        lengthChange: true,
        fixedHeader: true,
        buttons: [ 'copy', 'excel', 'csv', 'pdf','print', 'colvis' ],
        pagingType: 'full_numbers',
        lengthMenu: [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]],
        pageLength: 10,
    });

    table.buttons().container()
        .appendTo( '#studentview_wrapper .col-md-6:eq(0)' );

    // Apply the search
    table.columns().eq( 0 ).each( function ( colIdx ) {
        if (colIdx == 0) return; //Do not add event handlers for these columns

        $( 'input', table.column( colIdx ).footer() ).on( 'keyup change clear', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        });
    }); 

    //Gives user the option to clear all fitlers
    $('#clrfilter').on('click', function(){
        $('#studentview').DataTable().state.clear();
    });
});